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.
In order to work with Vue in laravel we need Nodejs installed in our system and application, run the command in your terminal:
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.
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 is the same file as
composer.json when you using blade system but for nodejs.
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 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.