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.
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.
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.
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.
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.