CODEWITHSUNDEEP
laravelvuetify.jslaravel-jetstream
netnull
netnull

Reputation: 221

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

Upvotes: 10

Views: 15666

Answers (3)

Richard
Richard

Reputation: 111

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

Upvotes: 0

Binaya
Binaya

Reputation: 116

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/[email protected]/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

Upvotes: 10

Shturmavik
Shturmavik

Reputation: 304

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/[email protected]/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

Upvotes: 17

Related Questions