How to install and setup Vuetify 2 - Laravel 6

#laravel #vue #vuetify #webdev

Vuetify is a component library based on the Material Design standard, widely accepted by the dev community since it wraps the desktop and mobile universes with responsiveness, flexibility, and extensibility.
For more information see: https://bit.ly/2OdsYwK

In this post, I will show you how to install and configure it to create a nice layout for your next app.

First of all, we create a new Laravel project:

laravel new vuetify-test

Go to the app directory and install Vuetify with npm:

cd vuetify-test
npm install vuetify

Add the Vue scaffolding with php artisan:

php artisan preset vue

Install dependencies:

npm install

Go to welcome.blade.php and add/delete what you need or copy the following to make your file to look like this:

// /resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vuetify</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

Create an index.js file in a vuetify directory with the following content:

// /resources/js/vuetify/index.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Create a simple component App.vue:

// /resources/js/App.vue

<template>
  <v-app>
    <v-alert type="warning" :value="true">
      Vuetify was installed properly
    </v-alert>
  </v-app>
</template>

<script>
export default {
  name: "App"
};
</script>

And finally change your app.js file to the following:

// /resources/js/app.js

window.Vue = require('vue');

import vuetify from './vuetify'

import App from './App'

const app = new Vue({
    vuetify,
    render: h => h(App),
    el: '#app',
});

Watch for file changes and serve the app

npm run watch
php artisan serve

Go to the server URL and you should see an alert showing that Vuetify it's installed and ready to use!

Top comments (5)

Jack • May 26 '20

For some reason, even though I can see it right there, it cannot resolve the module in './veutify'.

Alan Mac Cormack • Jun 11 '20

Hey Vincent, sorry for the delay in the answer.
Did you manage to make it work?

Jack • Jun 12 '20 • Edited

Hello, yes I did! And I also apologize for the late reply, because I've forgotten how I fixed it! At any rate, I think that your tutorial is quite right. My application may have deviated from a standard configuration significantly at this point.