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?
How to Add Vuetify to a Laravel Project
We will add Vuetify to
In this example, we will
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.
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:
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
Then we execute a database migration to create the database tables we need.
Now we can add Vuetify Configuration with authentication
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
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.
Once you have chosen which of the preset you want to add, then you can now run
If everything goes to plan you should now be able to view your Laravel Website. In my
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
- How to use Github actions to build & deploy Github nuget packages - October 14, 2021
- How to implement cross cutting concerns with MediatR Pipeline Behaviours - October 5, 2021
- Understanding the difference between Queue and Stack Data Structure - September 22, 2021