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:

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

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

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

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

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:

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

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

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

--

--

I just do what I love to do.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store