Hi Coders, the material design is definitely the latest trend. As part of SEO and UX, a minimalist material design helps a lot. This Laravel Vuetify stack can genuinely help you to unleash

Laravel Vue is a magical match. However, the default Laravel installation comes with Bootstrap framework. In the case of Material design, Vuetify is a gem.

In this post, we will see how to add Vuetify to Laravel. If in case you don’t know about Vuetify, follow the link before you proceed.

If in case you are not familiar with vue make sure you check out Vue JS tutorial for beginners.

Laravel Vuetify

Add Vuetify to Laravel

Let’s start by creating a new Laravel project.

laravel new larafy

The current Laravel version is 5.8. Let’s go inside the folder and open up our text editor.

So, now if you notice the package.json file you will notice bootstrap and jQuery is there. As we will be working with Vue so both of these are not required.

laravel package.json

Let’s remove it first through the command line. Open up your shell and write the command below.

php artisan preset none

Now the front-end frameworks are removed successfully from your package.json, including Vue. So add it back as you will need it for Vuetify.

It’s quite easy to add it back again. Just use the same command and replace none with vue.

php artisan preset vue

Finally, you are ready to include Vuetify in your Laravel project.

npm i vuetify --save

Now, as everything is ready so let’s install the node modules and get started.

npm i vuetify --save

Setup the resources

Now our resources are ready so you can just start including it in your files. The very first thing I will do is, add Vuetify to our app.js file.

import Vuetify from 'vuetify'
Vue.use(Vuetify)

Make sure you remove the unnecessary comment lines and add the above 2 lines before adding components.

So now javascript is added, now go ahead and import the CSS file into the app.scss.

@import '~vuetify/dist/vuetify.min.css';

Finally, our Laravel Vuetify project is ready. Let’s run the development server and check.

npm run watch

On the other hand, open up another shell window and run.

php artisan serve

Setup necessary things

Now as Vuetify is added you can start working. However, I have missed one thing, the icons.

In this case, all you will need to do is open up the blade file and include the below line.

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

First of all, Vuetify follows its own application markup. So make sure you add the v-app element along with id app as follows.

<v-app id="app">

Now you are ready to go. Open your browser and test it.

Hope this brief article has helped you to create your Laravel Vuetify project. Share with your friends and help them to get started.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.