Vuetify is an impressive material UI framework based on VueJS. VueJS has grabbed a lot of attention and it's one of the most popular JS frameworks available right now. Laravel on the other hand is a popular choice among back-end developers. Also, it is the most popular framework of the PHP world. Laravel Vue is a magical match. In this Laravel Vuetify article, we will see how to use Vuetify with Laravel 8.

Laravel Vuetify

Install Laravel and Laravel UI

The current stable Laravel version is 8. It does not come with any inbuilt starter kits like it used to be with the series 5. However, we can do that in 3 ways now.

Laravel Breeze - This starter kit will integrate your application with Tailwind CSS and authentication views based on blade. It also adds some controllers to handle the entire authentication flow.

Laravel Jetstream - Jetstream is a more mature starter kit that includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management. Its also bundled with Tailwind CSS and lets you choose betweenLivewire or Inertia.js for advanced stuff.

Laravel UI - The less popular one that provides authentication views and controllers to handle the entire authentication flow. This one comes with 3 variants for UI Bootstrap, VueJS, and React JS.

In this article, we are going to use Laravel UI and use VueJS scaffolding.

Let us start by installing a new Laravel project.

laravel new larafy

Now once the project is ready and we will go inside the project directory and install laravel/ui.

composer require laravel/ui

Now we have 2 options either integrate just the front end framework or library or integrate and generate the auth views with it.

Lets go with the first option for now.

php artisan ui vue

Install and setup vuetify

Once we setup ui vue now we have to install the necessary node_modules for our application. So lets add that as follows.

npm i

Now we will add Vuetify to our Laravel project.

npm i vuetify

This will install Vuetify with webpack. However there are few dependencies that we need to manually install while using with webpack.

npm i sass sass-loader deepmerge -D

sass & sass-loader are used for handling scss in our application and the last one deepmerge is used for treeshaking.

Now create a new file called vuetify.js inside resources/js. This file will work as a plugin and will contain all the configurations for Vuetify.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#3f51b5',
                secondary: '#696969',
                accent: '#8c9eff',
                error: '#b71c1c',
            },
        },
    },
})

In the above code we have imported Vuetify JS and CSS files and added it with Vue. Also we have created our own theme with it.

Now the last part is left and we need to place it in Vue constructor.

require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
    vuetify
});

Import the vuetify file into app.js as shown above and pass it into the constructor.

Now you have successfully created a Laravel Vuetify project.

Setup template to use with Vuetify

Lets create a new blade file called app.blade.php inside resources/views.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <v-app app>
            <v-container>
                <v-btn color="primary">
                    Primary
                </v-btn>
                <v-btn color="secondary">
                    Secondary
                </v-btn>
                <v-btn color="error">
                    Error
                </v-btn>
            </v-container>
        </v-app>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

It has the basic HTML markup but inside the body the first thing we have is a div with id app. This one is must as we have shared the query selector inside our Vue constructor. Now the next thing inside it is the v-app component. Anything we add should be placed inside this and make sure to pass the app props to it. Otherwise the rest of the components may not render colors.

Finally thats the way to create a Laravel Vuetify project. Hope you have liked this article and it helped you to accomplish your target. Create an account to get latest updates from Coders Diaries blog.