Marcus Es's Blog
How to add Vuetify in a Laravel project

How to add Vuetify in a Laravel project

Marcus Es's photo
Marcus Es
·

4 min read

Vuetify provides ready made components built with material design specifications. I will go over all the necessary steps to set up a Laravel project with Vue.js and Vuetify as a frontend.

First of all you need the following installed on your computer.

For this tutorial, I will name our project vuetivel. Let’s get started!

First open your terminal and create a new Laravel project called vuetivel and change the directory to the project folder.

$ laravel new vuetivel
$ cd vuetivel

Install a Laravel UI package to use Vuetify in your project. 

$ composer require laravel/ui

Using the Laravel UI package also allows you to install the Laravel Authentication and Authorization presets.

After the Laravel UI package has been installed successfully, install a Vue scaffolding.

$ php artisan ui vue
$ npm install && npm run watch

The npm run watch command will compile the components then watch the files and recompile automatically when you make any changes.

Consequently, install Vue-router and Vuetify plugins since they are not available in Laravel by default.

$ npm install vue-router vuetify

Since you will be using Vuetify, remove Bootstrap and jquery presets from the project by executing the following command.

$ npm uninstall bootstrap && jquery

Next, go to resources/sass/app.scss and replace bootstrap with Vuetify presets as follows.

//replace
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import 'variables';
@import '~bootstrap/scss/bootstrap';

//with vuetify material design font and vuetify css file
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css');
@import '~vuetify/dist/vuetify.css';

Now go to recources/js/bootstrap.js and remove the try-catch exception block and save the file.

//remove
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

Now that you have successfully installed all the packages and plug-ins we need. Your next step will be configuring Vue and Vuetify.

Go to your project folder resources/views/welcome.blade.php and replace the code with the one below.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
        <title>Laravel</title>
    </head>
    <body>
        <div id="app">
                   <example-component></example-component>
        </div>
    <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

If you go to resources/js/app.js you see that Vue as been installed and available globally.

require('./bootstrap');

window.Vue = require('vue');

Go to recources/js folder and create vuetify.js and router.js files.

In the vuetify.js file copy and past the following code.

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify)

export default new Vuetify({})

In the router.js file copy and past the following code.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

const routes = []

export default new VueRouter({routes})

The code above enables Vuetify and Vue-router in Vue.

The next step will be to import vuetify and vue-router and the Vue component to be used, in this case, use ExampleComponent.vue that comes pre-installed.

Go to recources/js/app.js and copy and past the code below.

require('./bootstrap');

window.Vue = require('vue');
import Vuetify from './vuetify'
import Router from './router';
import Example from './components/ExampleComponent'

Remove the code below since you have imported the ExampleComponent.vue component.

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

Add Vuetify and Router to the Vue instance and add example-component as key and Example as value.

new Vue({
    el: '#app',
    Router,
    Vuetify,
    components:{
        'example-component': Example
    }
});

Importing a component and adding it to the Vue instance will make it available globally.

To test if Vuetify has been properly configured, go to recources/js/components/ExampleComponent.vue and replace the bootstrap code inside the <template> tag with a sample vuetify code snippent.

<template>
     <v-container>
         <v-btn>Click Me</v-btn>
     </v-container>
</template>

Finally, serve your project to see your vuetify project in Laravel.

$ php artisan serve

Screenshot (120).png

If you see a Vuetify button, you have successfully added Vuetify to your Laravel project, Congrats!

Happy Coding!

Vue.jsLaravel