Vue.js with Laravel 9 setup guide in 2022

From: tristan | Comments: 0

Since Laravel gives us a free choice of any Javascript Framework from scratch, we have to install VUE.JS by ourselves nowadays. Vue.js is in the Laravel community still on of the most popular Framework. It’s easy to learn and you can make SPA’s with some lines of code. In this tutorial I want to show you, how to setup VUE.JS in Laravel 9 (also works for Laravel 8).

1. Install a fresh Laravel App

First of all, we create a new Laravel App. If you have already an existing app, you can jump some steps further. I will show you the quick way for installing a fresh Laravel App. About the System requirements, how to setup a webserver and how to install an App via Docker or other platforms, please look at the Laravel documentations site. I assume that you have already a webserver running and composer is installed. Let’s get started:

$ laravel new vueapp
$ cd vueapp

Alternative you can use composer for installing a new app:

$ composer create-project laravel/laravel vueapp
$ cd vueapp
$ php artisan serve

2. Install Laravel UI

Laravel gives us a nice composer package for some common JS and CSS frameworks called Laravel UI. It helps us to setup Bootstrap, React or Vue easily with just some commands. This tool prepare for us some basic scaffolding and gives us a good starting point. It also took care about lodash, axios and some other stuff.

$ composer require laravel/ui

Now we have to decide what kind of scaffold we want to use. In our case, we want to use VUE. So here is command for that:

$ php artisan ui vue

Our setup for Vue is ready now. Now we have to install VUE bit itself and some other dependencies. After that we have to compile the JS and CSS code and insert the links into our blade layout file.

Install VUE and all other dependencies:

3. Install Vue with npm

$ npm install

This process can take a while, so be patient. After everything is installed we have to compile our code.

$ npm run dev

For the first run the “dev” option is totally okay. Later in your development process you can run the “watch” option and your code will be compiled every single time when you update your JS or CSS code and save it, that is a lot faster.

For some reasons it can be possible that the error “Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin’ Require stack:…” occur. Then you may update the vue loader:

$ npm update vue-loader

If you had this error, repeat the “npm run dev” command again and hopefully your code will be compiled.

4. Prepare your template

Now we have to link the compiled code into our blade template. At bottom of your Layout insert the following line of code:

<script src="{{ mix('/js/app.js') }}"></script>

The mix command handle for you the right url to your script and do the versioning of all your compiled code as well. This is very helpful, so you do not need to clear your cache after each compiling. To activate the versioning, open the webpack.mix.js file in the root directory of your project and add the version method to the mix setup. So it should look with the verison method:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .version(); // automated versioning

For more information about the versioning go to the official laravel webpack page.

5. Create your own components

As Laravel made some scaffolds for you, you will find already a ready prepared example component in your app. Open the folder resources/js/components and you will see the ExampleComponent.vue file. I think it’s a good starting point to copy that and create your own component. If you want, you can copy mine and name it CountComponent.vue in the same directory of the ExampeComponent.vue.

<template>
    <div>
        {{ count }} <button @click="count++">Count</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }
</script>

This is a very simple Vue component with a button and displaying a variable. Each time you press the button, the value counts one up. In the next step we have to include the components to our main script. Open the app.js file in the resources/js folder and insert the component. After that your fresh app.js file should look like this:

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// Your new Count component
Vue.component('count-component', require('./components/CountComponent.vue').default); 

const app = new Vue({
    el: '#app',
});

As you update your js file, you need to recompile it. If you are not using the “watch” mode like mentioned before run following code again:

$ npm run dev

6. Insert the component into your template

Before we add the component to your template you have to define the container where it should be rendered inside. Basically you define the container in the main layout file. However use the blade template you prefer and define a container like this:

<div id="app"></div>

Inside this container you can insert any of your components. Here an example with our count component.

<div id="app">
     <count-component></count-component>
</div>

Browse the site where you change your template and if everything worked fine, you should see your rendered Vue component. If you have any problems, you can leave a comment :), I will reply asap.

7. Little extra bonus (Twitter Bootstrap)

During installing Vue, we added Twitter Bootstrap as well. So if you are familiar with Bootstrap and like to use it everything is ready to go. In the resource/sass directory a Bootstrap scaffold is already done for you.

If you don’t want to use Bootstrap you have to remove the Bootstrap import in the app.scss file. You are totally free to install any other CSS framework like Tailwind CSS or others. But that’s an other chapter.

Setup Vue manually

In order you don’t want to use the Laravel ui package, you can also install Vue manually. Sometimes it need to be necessary as your app is already in a further progress.

If you have not installed the default npm dependencies yet, please do it first

$ npm run dev

Now you have to install the vue dependencies you need

$ npm install --save-dev vue vue-template-compiler

Now you can go back to chapter four, you just need to create the folders by your own. Here is a short version what you have to do.

Insert the link to your Script at the bottom of your layout

<script src="{{ mix('/js/app.js') }}"></script>

Open the webpack.mix.js file in the root directory of your app and add the Vue and the Version method.

mix.js('resources/js/app.js', 'public/js')
    .vue() // ADD THIS LINE
    .sass('resources/sass/app.scss', 'public/css')
    .version(); // AND THIS LINE

Create a new folder components in your resources/js directory. Create inside this component and names it CountComponent.vue. As you can guess, it is the same script like above

<template>
    <div>
        {{ count }} <button @click="count++">Count</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }
</script>

Now you have to include the component in your main js file. So open the app.js file in the resources/js directory. Copy the code and insert into the app.js file

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// Your new Count component
Vue.component('count-component', require('./components/CountComponent.vue').default); 

const app = new Vue({
    el: '#app',
});

Now you can compile the code as usual

$ npm run dev

Now you can follow exactly the instructions from chapter 6. After that your app should run perfectly!

Conclusion

As you can see, it is still very easy to use Vue.js in an Laravel 9 app. In my opinion it easier to install Vue directly in a fresh new Laravel app so you do not need to setup everything manually, but it is totally up to you. If you have any question feel free to leave a comment.