How to set up and use Vue in your Laravel 8 app

In older versions of Laravel, Vue was set up automatically with every new installation. However, in newer versions you have to set it up yourself.

Luckily, the laravel/ui package provides an easy way to set up Vue in your Laravel application.

Follow these steps to get Vue set up in your Laravel app.

1. Create a new Laravel application

If you haven’t already, create a new app using Laravel’s installer and navigate into that directory.

$ laravel new my-app
$ cd my-app

2. Install the laravel/ui composer package

$ composer require laravel/ui

3. Set up the Vue scaffolding

The laravel/ui package has some helpful Artisan commands which will automatically scaffold out everything you need to get started with Vue.

$ php artisan ui vue

You’ll notice that it makes a few changes in your app. There will be more details about those changes down below.

4. Compile the files

Finally, you’ll need to install the newly added dependencies and compile them.

$ npm install && npm run dev

Note: if you’re running this for the first time, Mix might need to install additional dependencies which it’ll pull in automatically. If you see an error message, just run npm run dev again.

5. Include /js/app.js in your view

Your app.js file will be compiled and saved to public/js/app.js. Since we’re using Laravel Mix to compile it, we can use the mix() helper method to generate the correct path for us. Using the mix() helper is recommended so that the proper file name is used if you’re using versioning.

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

6. Add the vue root element to your HTML

Make sure to also have a root element with an id of app to your HTML scaffolding. Otherwise, Vue won’t know where to mount the components.

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

Registering Single File Vue Components

The laravel/ui package will create a new directory in resources/js/components. This is where you can add new Vue components. You’ll notice that the laravel/ui package added an ExampleComponent.vue file in there already.

Once you create your Vue component file, you’ll need to register it with Vue. In Laravel, you can do that in your main app.js file (resources/js/app.js).

You’ll notice the ExampleComponent is already registered.

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Feel free to create sub directories in your resources/js/components/ directory to organize your files. Just make sure the path in your require() method matches your directory structure.

Vue.component('admin-login-component', require('./components/Admin/AdminLoginComponent.vue').default);

File Changes

You’ll notice that the laravel/ui package will make a number of changes to your files.

package.json

All the necessary packages were added as dependencies.

• vue
• vue-template-compiler

Most notably, the vue packages were added as dependencies. We’ll need these in order to use Vue and compile single file components.

• bootstrap
• jquery
• popper.js

Bootstrap and it’s dependencies (jQuery, popper.js) were added as dependencies into your project. These additional dependencies were installed because laravel/ui’s optional authentication scaffolding views use Bootstrap.

• sass
• sass-loader
• resolve-url-loader

Bootstrap’s CSS is written in SASS. These SASS packages are pulled in so that we can properly compile our SASS into CSS.

resources/js/app.js

Here we initialize Vue and include our components so that they’re available in our compiled JS.

resources/js/bootstrap.js
This file was modified to load Bootstrap and jQuery.

webpack.mix.js
The vue() method automatically adds some necessary Babel configuration that are needed to compile single file components.

Laravel Mix now also compiles SASS instead of CSS.

Manually Setting up Vue without Using laravel/ui

You don’t need to use the laravel/ui package in order to add support for Vue. In fact, you may actually choose not to if you don’t need the additional dependencies (like Bootstrap). Adding Vue support is easy enough.

1. Install npm dependencies

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

2. Create a component

Create a new directory named components in the resources/js/ directory.

Create a new file ExampleComponent.vue and fill it with the following code.

<template>
    <div>Hello, Example Component!</div>
</template>

<script>
export default {
    mounted() {
        console.log('Example component mounted.')
    }
}
</script>

2. Initialize Vue

We need to require the Vue package in our application, register our components and then initialize our Vue app.

Add the following to your resources/js/app.js file.

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

// Register Vue Components
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

3. Add Vue support to Laravel Mix

Add the vue() method to your Laravel mix chain.

Update the following in your webpack.mix.js file.

mix.js('resources/js/app.js', 'public/js')
    .vue() // <- Add this
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

5. Compile your assets

$ npm run dev

Note: if this is a new project, make sure that you run npm install before running this command.

6. Update your HTML

Make sure to include your compiled javascript file in your HTML views.

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

Also, make sure you have a root element with an id of app.

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

Notice that this #appid corresponds to the id we passed to Vue when we initialized it in step #2. You can, of course, name that id whatever you would like. Just make sure it matches el configuration when initializing your Vue app.

Now with any luck. You should be able to load your app in the browser and see the rendered Vue component.

Level Up Coding

Thanks for being a part of our community! Level Up is transforming tech recruiting. Find your perfect job at the best companies.

Level Up — Transforming the Hiring Process