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

Question

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

I posted a tutorial: https://medium.com/@horaceh/laravel-jetstream-inertia-and-vuetify-8aa2ab3c1e41 — ohho, Oct 21 '20 at 12:01

Shturmavik · Answer 1 · 2020-11-12T06:21:54.017

Fresh Laravel 8.12 + Jetstream + Inertia + VueJs + Vuetify

add to header the string of style in /resources/views/app.blade.php

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

add to /resources/js/app.js

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

and vuetify: new Vuetify(), after 'new Vue({' like this:

require('./bootstrap');

import Vue from 'vue';
import Vuetify from 'vuetify';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

import 'vuetify/dist/vuetify.min.css';

Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(Vuetify)

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

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

After that, for example, you can create your vuetify component like this: /resources/js/Components/NavigationDrawers.vue with code from Vuetify labrory
init this vue-component in /resources/js/Pages/Dashboard.vue like <navigation-drawers/> with call import NavigationDrawers from '@/Components/NavigationDrawers' and NavigationDrawers in <script>

Example:

<template>
    <app-layout>
        <navigation-drawers/>

        ....
        ....
    </app-layout>
</template>

<script>
    import NavigationDrawers from '@/Components/NavigationDrawers'

    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
            NavigationDrawers,
        },
    }
</script>

It is help you for setting vuetify to your project. Sass and other config you can config self.

a screenshot example Navigation Drawer

a screenshot example Navigation Drawer two

@Shturmavik you're an absolute gent and a scholar, thank you — megachill, Dec 04 '20 at 13:04
Laravel Jetstream comes with tailwindcss. Afaik UI frameworks such as tailwindcss and vuetify are not meant to be mixed. How can one resolve this? There is for example the project [jetstrap](https://github.com/nascent-africa/jetstrap) to replace tailwindcss with bootstrap 4 in a Laravel Jetstream project. I would expect that one should have something similar to switch to vuetify. A question about this is https://stackoverflow.com/questions/56551434/how-do-i-get-tailwind-and-vuetify-to-work-together-without-causing-style-artifac . Any thoughts on how you would proceed? — Hotschke, Mar 02 '21 at 12:48
doesn't work anymore :( jetstream / intertia now installs with vue v3+ and guess what...vuetify doesn't work with v3! — Ben Summerhayes, Apr 18 '21 at 14:09
further to my last,if you're desperate then you can install a slightly older version of Jetstream: composer require laravel/jetstream:v2.1 — Ben Summerhayes, Apr 18 '21 at 14:59

Binaya · Accepted Answer · 2021-06-06T11:38:59.023

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/font@5.x/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

Hello Binaya. Are you available to hire? You can reach me here, or twitter @ijpatricio — ijpatricio, Jun 24 '21 at 15:59
what about global scss so every components can access global variables? thanks — Fahmi, Sep 04 '21 at 12:51
vuetify doesn't work on this. it does show but the classes are not there. I can't add classes like "white--text" — Jan Michael, Oct 06 '21 at 06:03

score 0 · Answer 3 · answered Jan 05 '23 at 18:14

Vuetify now has a Vue 3 branch (at the time of writing still in beta) The point about the clash with tailwind still stands although the problem is mostly manifests its self in terms of file size (of the css) Anyway to get things working in an install of Laravel (9) and Jetstream with Inertia you need to add vuetify

npm install vuetify@^3.0.7 --save

Then edit resources/js/app.js

by adding:

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
})

and in the same file amending the createInertiaApp function set up so that Vue uses Vuetify

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
           ...
            .use(vuetify)
           ...
    },
});

You will then be able to use Vuetify components. You will probably want to set your own colours. There are two options SASS or javascript

here is an example of the Javascript option

const vuetify = createVuetify({
    theme: {
        themes: {
            light: {
                dark: false,
                colors: {
                    primary:  "#415e96",
                    secondary: "#b89acc"
                }
            },
        },
    },
    components,
    directives,
}

)

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

3 Answers3