DEV Community

Cover image for How to install and setup Vuetify 2 - Laravel 6
Alan Mac Cormack
Alan Mac Cormack

Posted on • Updated on

How to install and setup Vuetify 2 - Laravel 6

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
Enter fullscreen mode Exit fullscreen mode

Go to the app directory and install Vuetify with npm:

cd vuetify-test
npm install vuetify
Enter fullscreen mode Exit fullscreen mode

Add the Vue scaffolding with php artisan:

php artisan preset vue
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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',
});

Enter fullscreen mode Exit fullscreen mode

Watch for file changes and serve the app

npm run watch
php artisan serve
Enter fullscreen mode Exit fullscreen mode

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

Discussion (5)

Collapse
vincenthall profile image
Vincent Hall

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

Collapse
siliconmachine profile image
Alan Mac Cormack Author

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

Collapse
vincenthall profile image
Vincent Hall • Edited on

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.

Collapse
anfossistudio profile image
AnfossiStudio

Thank you so much

Collapse
jamaluddinrumi profile image
Jamaluddin Rumi

thank you for these code window.Vue = require('vue');
🙏