Hello there, we have a new category [Vuejs] in TJD STUIDO and this is the very first post of it.

I'm so excited to share with you more about Vuejs and working with it in Laravel.

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. 

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Getting Started

In order to work with Vue in laravel we need Nodejs installed in our system and application, run the command in your terminal:

npm install

If you faced any error this article might help you.

Now Note: In this article I'm not going to cover how to make SPA app but I'll more focus of how things running in there.

Installing dependencies

As you might know during your development process with node you'll need to install some packages just like when you making application with blades. To install packages with nodejs and use them you'll use command below

npm install <package name> --save

This command will install node package to your application in node_modules folder and add dependencies to package.json file.

Package.json is the same file as composer.json when you using blade system but for nodejs.

Unistalling Packages

To unistall packages you will use command below

npm uninstall <package name>

To remove it from the dependencies in package.json, you will need to use the save flag:

npm uninstall --save <package name>

Note: if you installed the package as a "devDependency" (i.e. with --save-dev) then --save won't remove it from package.json. You have to use --save-dev to uninstall it.

Mixing your assets

Remember each time you make changes in your codes you have to run one of the commands below (defference explained)

npm run dev    //one time job

// OR

npm run watch  // keep watching your files and if there is any change automatically with run the dev command above

You can always find more information about npm and how it works here.

This article was mostly about how things run around nodejs(npm) / Vuejs, in next tutorials I'm going to actually walk you through making SPA application step by step (Make sure to join our mailing list below in footer to get latest updates in your inbox).

 u are ready to start writing your very first SPA (single page application) app.