10

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

Hotschke
  • 9,402
  • 6
  • 46
  • 53
netnull
  • 201
  • 1
  • 3
  • 13
  • 2
    I posted a tutorial: https://medium.com/@horaceh/laravel-jetstream-inertia-and-vuetify-8aa2ab3c1e41 – ohho Oct 21 '20 at 12:01

3 Answers3

17

Fresh Laravel 8.12 + Jetstream + Inertia + VueJs + Vuetify

  1. 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">
  1. 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);
  1. After that, for example, you can create your vuetify component like this: /resources/js/Components/NavigationDrawers.vue with code from Vuetify labrory

  2. 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
  • 304
  • 2
  • 6
  • @Shturmavik you're an absolute gent and a scholar, thank you – megachill Dec 04 '20 at 13:04
  • Awesome. Exactly what I was needed! – szabozoltan Jan 16 '21 at 20:45
  • 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
  • 1
    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
10

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

  1. To install laravel

     composer create-project laravel/laravel project_name
    
  2. 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", 
          },
  1. Now run composer update

  2. Now run php artisan jetstream:install inertia

  3. Now run npm install

  4. Now run npm install vuetify

  5. 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";
    
  6. 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);
    
  7. 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:

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

  2. Add following code to test.vue

     <template>
       <v-app>
         <v-container>
             <v-btn>Click Me!</v-btn>
          </v-container>
       </v-app>
     </template>
    
  3. Now run npm run dev

  4. Now go to route/web.php and add

       Route::get('/', function () {
       return Inertia::render('test');
     });
    
  5. Now php artisan serve to run in browser. and don't forget to add migrate and add database to .env

Binaya
  • 116
  • 1
  • 4
0

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,
}

)

More on this here

Here is an (untested by me) article on removing the collisions between tailwind and Vuetify

Richard
  • 111
  • 1
  • 4