How to combine the VueJS Router with Laravel

I’m a huge fan of Laravel and like to code whenever I have some spare time. More recently I also started with VueJS, which is definitely making more sense when you want to offer a very rich and dynamic user experience. One of my biggest challenges has been to combine both the VueJS Router and Laravel routing concepts. I wanted to use the Laravel back-end and authentication methods provided, but I also wanted to use VueJS for some more dynamic parts. We can of course add the VueJS template and script elements to every blade we create, but the result is that every time the page will be reloaded. This is not something we want. We want to use Vue Resource in order to create an application without the need to reload everytime we change the route. How can we do that, when working with Laravel?

To start with we need to have NodeJS. Download your install from the NodeJS website or use the command line to install NodeJS. Also make sure that you are least using Laravel 5.4. After the installation of NodeJS, make sure both of these commands are working:

node -v
npm -v

The next step is to install all relevant packages:

npm install

If you are using Windows, you might need to run the following command as well to install all relevant build packages:

npm install — global — production windows-build-tools

Next step is that we will add VueJS to our project. Run the following command: