How to install Vuetify in Laravel 8 with jetstream-inertia?

I'm trying to install Vuetify on the latest Laravel versione (8) but I cannot do it. Seems it doesn't work even if the console doesn't show me any error.

That's my resource/plugins/vuetify.js

import Vue from 'vue'
// import Vuetify from 'vuetify'
import Vuetify from 'vuetify/lib'
// import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

My webpack.mix.js :

const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
])
.webpackConfig({
  plugins: [
    new VuetifyLoaderPlugin()
  ],
})
.browserSync('tb8.test');

The app.js

import PortalVue from 'portal-vue';

Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(vuetify);

const app = document.getElementById('app');

new Vue({
   vuetify,
   render: (h) =>
      h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(app);

and the welcome.blade.php

    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

   
        <style>
            body {
                font-family: 'Nunito';
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            @if (Route::has('login'))
                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                    @auth
                        <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 underline">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
                        @endif
                    @endif
                </div>
            @endif

            <v-app>
                <v-main>
                    Hello World
                </v-main>
            </v-app>
        </div>
    </body>
</html>

Can anyone help me to find where is the mistake? Thank you in advance

Valerio

Solution

Currently Vuetify does not work with vue 3, so to install vuetify you have to go with vue 2. to do so: we can install jetstream 2.1 which comes with vue 2. I have described installation process below:

Youtube video: https://youtu.be/V8_yLfNhg2I

To install laravel

 composer create-project laravel/laravel project_name

Now go to composer.json file and inside require:{} add just one line and rest of composer file should be same.

"laravel/jetstream": "2.1",

after adding that "require" section of composer.json would look something like this:

 "require": {
            "php": "^7.3|^8.0",
            "fideloper/proxy": "^4.4",
            "fruitcake/laravel-cors": "^2.0",
            "guzzlehttp/guzzle": "^7.0.1",
            "laravel/framework": "^8.40",
            "laravel/tinker": "^2.5",
            "laravel/jetstream": "2.1", 
          },

Now run composer update
Now run php artisan jetstream:install inertia
Now run npm install
Now run npm install vuetify

Go to resources/css/app.css and add following

 @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

 @import url('https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css');

 @import "vuetify/dist/vuetify.min.css";

Now go to resources/js/app.js and add following code:

require('./bootstrap');

// Import modules...

import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
//add these two line
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
//also add this line
Vue.use(Vuetify);

const app = document.getElementById('app');        

new Vue({ 
     //finally add this line 
    vuetify: new Vuetify(), 
render: (h) =>
    h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
    }).$mount(app);

Now run npm run dev

At this moment your vuetify will work!

To check whether vuetify with inertia js is working or not please follow:

Go to resources/js/Pages and create new file name test.vue

Add following code to test.vue

 <template>
   <v-app>
     <v-container>
         <v-btn>Click Me!</v-btn>
      </v-container>
   </v-app>
 </template>

Now run npm run dev

Now go to route/web.php and add

   Route::get('/', function () {
   return Inertia::render('test');
 });

Now php artisan serve to run in browser. and don't forget to add migrate and add database to .env