How to add Vuetify to Laravel Project

I wanted to add Vuetify to an existing Laravel Project I had created, and after an hour or so of trying a few different methods and blog post I found. I finally found a solution that worked and in the end was extremely easy and works really well.

In this post, I will walk through how to implement the solution in the hope that it helps others and helps the original author and developer of the solution to gain some exposure.

What Is Vuetify?

Vuetify is a full-featured development framework for Vue 2 that provides clean, semantic and reusable components that help to take any idea from conception to production.

Vuetify is developed exactly according to Material Design specification and every component has been handcrafted to provide the best possible UI tools to your application. The development doesn't stop at the core components outlined in Google's specification. Through the support of community members and sponsors, additional components will be designed and made available for everyone to enjoy. Version 2.x will utilize Material Design Specification v2.

Does not work with Laravel 6 and 7

The solution provided in this article is out of date.
The author of the preset package is no longer supporting the package,

How to Add Vuetify to a Laravel Project

We will add Vuetify to an newly generated Laravel project using scaffolding preset for Vuetify - a Material Design Component Framework with Vue and Vuex.

In this example, we will walk-through the process with Laravel configured on a Ubuntu development machine making use of a Homestead environment.

If you haven't configured Laravel and Homestead on your Ubuntu Machine, Check out How to install Laravel on Ubuntu 18.04 the article will provide full details on how to install, configure Laravel and create a new project to make use of Homestead virtual environment.

Using Laravel Frontend Presets to install Vuetify with Vuex

We will make use of a Laravel front-end scaffolding preset to add Vuetify to our project. This preset comes packaged with two commands which assist in adding Vuetify with or without Authentication scaffold in one go.

The further details of the Laravel-Vuetify presets can be found on Github. In order to make use of the presets we will need to use composer to install them to our project.

A Vuetify frontend preset for the Laravel Framework
https://github.com/laravel-frontend-presets/laravel-vuetify
17 forks.
80 stars.
6 open issues.

Recent commits:

Update README.md, GitHub
Update README.md, GitHub
solved error with vuetify version, Sergi Tur Badenas
Laravel 5.7 don't use or on views, Sergi Tur Badenas
Adapted to Laravel 5.7, Sergi Tur Badenas

composer require laravel-frontend-presets/vuetify

Laravel will automatically discover the package and there will be no need to register the service provider.

Once the package has been installed we can make use of one of the following commands:

php artisan preset vuetify

Add Vuetify with OAuth Authentication

Laravel already makes it easy to perform authentication via traditional login forms, but what about APIs? APIs typically use tokens to authenticate users and do not maintain session state between requests.

Laravel makes API authentication a breeze using Laravel Passport, which provides a full OAuth2 server implementation for your Laravel application in a matter of minutes.

First we add Laravel/Passport to composer

composer require laravel/passport

Then we execute a database migration to create the database tables we need.

php artisan migrate

Now we can add Vuetify Configuration with authentication

php artisan preset vuetify-auth

Adds Authentication Scaffolding in one go. This preset install Laravel Passport which makes setting up authentication for API applications really easy.

Passport provides a full OAuth2 server implementation for Laravel application. . Passport is built on top of the League OAuth2 server which is standards compliant implementation of an OAuth 2.0 authorization server written in PHP which makes working with OAuth 2.0 trivial.

This will enable you too easily configure an OAuth 2.0 server to protect your API with access tokens, or allow clients to request new access tokens and refresh them.

Information

Remember to ensure you are connected to your database if you use php artisan preset vuetify-auth because this will require database configuration and migration

Once you have chosen which of the preset you want to add, then you can now run

npm install && npm run dev && php artisan passport:install

If everything goes to plan you should now be able to view your Laravel Website. In my case I have the website already running in Homestead so it is just a simple case or visiting the test Url configured during How to install Laravel on Ubuntu 18.04 in a browser i.e. http://vuetify.test and view the result.

Conclusion

Making use of the Laravel Vuetify presets offers a quick and easy approach to getting your Laravel Project configured to make use of Vuetify to speed up your front-end development workflow.

In order to learn and understand how to successfully develop front-end applications using Vue and Laravel I recommend reading Full-Stack Vue.js 2 and Laravel 5: Bring the frontend and backend together with Vue, Vuex, and Laravel

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.