How to Install Vuetify 2 in Laravel 6

I will try to be short and precise, you might already know that Laravel 6 installation comes without many presets (Bootstap, Vue, React, Jquery), the choice is yours, however, in order Vuetify to work you must first install Vue:

> php artisan preset vue

after that let’s install the component framework, in your terminal type:

> npm install vuetify
> npm install

In the resources/js/app.js file include and add:

import Vuetify from ‘vuetify’;
Vue.use(Vuetify);

in the same file, at the bottom, where the Vue instance is called add thevuetify: new Vuetify()line, so the complete instance would be:

const app = new Vue({
  el: ‘#app’,
  vuetify: new Vuetify(),
});

Important, do not forget that you must wrap your app with the v-app component:

 <v-app></v-app>

it is located in the resources/views/layouts/app.blade.php file (note that this file gets installed in your installation only if you have already scaffolded the auth) otherwise, to test it out you can add the v-appin the welcome.blade.php file but you also need to link the app.js file in there by adding: <script src=”{{ asset('js/app.js') }}” defer></script>more info about the wrapper can be found here: https://vuetifyjs.com/en/components/application

Now let’s add the stylesheet, open the resources/sass/app.scss then add:

@import ‘~vuetify/dist/vuetify.min.css’;

You might need the icons too, install the material icons, and run them in the terminal:

> npm install @mdi/font -D

and again add in the same file resources/sass/app.scss but this time on a new line:

@import ‘~@mdi/font/css/materialdesignicons.min.css’;

save the file and run it in the terminal once againnpm installand after that write npm run watchor npm run devto start the process.

In the end, open a new tab in your terminal and type php artisan serveto boot up Laravel and that’s it.

To test it out, try to add some predefined Vuetify components in the app.blade.php file, I really hope I saved your precious time for your next glorious project, happy coding.

Let’s connect via Twitter: https://twitter.com/ifkas