Javascript in Laravel (installing Vue)
Installing Vue
Update May 2021
Please note that this post is currently 3 years old. As you know, things move fast in our tech world and event though the principles described in this post are still valid, there might be better ways to achieve the same result; You are free to continue reading, but I recently wrote a post about our current approach.
Additionally, Laravel 8 brings a new starter kit to quickly scaffold the frontend of your next project. It’s called Laravel Jetstream and is definitely worth taking a look. I’ll choose Laravel Jetstream with Inertia scaffolding for my next project.
Therefore, I am removing the code repository that originally came with this post.
Original post
Here is part three of our Javascript in Laravel series. In this series we discuss various ways to add Javascript to a Laravel project. Therefore, we have a sample project in which we like to improve the user experience of a typical registration form.
Today I’ll talk about adding Vue to Laravel. If you haven’t followed along, the first parts of the series are available here
Vue is really a fantastic Javascript framework. Whether you are coming from a jQuery background, used Angular or React before, the simple setup and the great documentation make it the best in my opinion.
Definitely the largest advantage of Vue (over jQuery) is its declarative nature. Earlier on in the series I mentioned jQuery being an imperative language. It took me some time to grasp the difference between these two, but it makes sense now.
Declarative code defines a set of variables that are used to render a component to the page. Changing the values will trigger a rerender. This means you only have to define your template once and work on the underlying data.
Imperative code however, works directly on the template. This means manipulation of the DOM nodes. The developer needs to think carefully about all user interactions that may change the page and handle these manually.
So I opt for a declarative language: Vue. But let’s first install it in our project.
Install Vue in Laravel
Since version 5.3, Laravel ships with Vue by default (summer ’16). The resources/assets/js folder contains a sample app.js and bootstrap.js file. Additionally there is an ExampleComponent.vue in the subfolder /components.
Before you can start playing with Vue, you need to install the dependencies found in thepackage.json file by running
npm install
followed by
npm run dev
The Vue instance that is defined in app.js targets a DOM node with id app. As soon as you create a blade view with this id and include the Example Component, you will see the Vue magic in action:
<div id="app">
<example-component></example-component>
</div>
Whoops, I forgot, of course you have to include the compiled app.js in your blade layout view as we discussed in the previous post!
Next up
An example component is definitely not the most interesting. It would be much more fun to implement the registration form we discussed in the jQuery way using Vue. However, to keep this post nice and short and focussed on installing Vue, I’ll present that in the following post.
