Call + (44) 0843 289 4539

0
  • No products in the cart.

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.

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.

PHP

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

Adds basic Vuetify Configuration

PHP

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.

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

PHP

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

Follow Me

Gary Woodfine

Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.
Follow Me