如何在 Laravel 8 中使用 jetstream-inertia 安装 Vuetify？

Question

如何在 Laravel 8 中使用 jetstream-inertia 安装 Vuetify？

10

我试图在最新的Laravel版本（8）上安装Vuetify，但我无法成功。似乎它不起作用，即使控制台没有显示任何错误。

这是我的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)

我的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');

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);

和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>

有人可以帮我找出错误在哪里吗？谢谢你们提前。

瓦莱里奥

- netnull

2

我发布了一个教程：https://medium.com/@horaceh/laravel-jetstream-inertia-and-vuetify-8aa2ab3c1e41 - ohho

3个回答

10

目前Vuetify不支持Vue 3，因此要安装Vuetify必须使用Vue 2。以下是安装过程：

Youtube视频：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",

在添加了composer.json中的“require”部分后，它会看起来像这样：

 "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

此时您的vuetify将正常工作！

要检查vuetify与inertia js是否正常工作，请按照以下步骤操作：

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

- Binaya

你好，Binaya。你现在有空吗？我可以雇佣你吗？你可以通过这里或者Twitter @ijpatricio联系到我。 - ijpatricio

全局 SCSS 怎么样，这样每个组件都可以访问全局变量？谢谢。 - Fahmi

vuetify在这里无法工作。它确实显示，但类不存在。我无法添加像“white--text”这样的类。 - Jan Michael

如何自动重新加载Vuetify中的更改？ - xetryDcoder

0

Vuetify 现在有一个 Vue3 分支（目前仍处于测试版）。尽管与 Tailwind 的冲突问题仍然存在，但问题主要体现在文件大小（CSS）方面。无论如何，在 Laravel（9）和 Jetstream with Inertia 安装中使事情正常工作，您需要添加 Vuetify。

npm install vuetify@^3.0.7 --save

然后编辑resources/js/app.js

添加以下内容：

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

同时在同一个文件中修改createInertiaApp函数的设置，使Vue使用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)
           ...
    },
});

然后您将能够使用Vuetify组件。您可能想设置自己的颜色。有两个选项SASS或javascript

以下是Javascript选项的示例

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

)

关于此处更多信息

这里是一篇（我未经测试的）文章，介绍如何消除Tailwind和Vuetify之间的冲突

- Richard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shturmavik · Accepted Answer

全新的 Laravel 8.12 + Jetstream + Inertia + VueJs + Vuetify

在 /resources/views/app.blade.php 中的头部添加 style 字符串。

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

添加到 /resources/js/app.js

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

在 'new Vue({' 后面加入 vuetify: new Vuetify(), 就像这样：

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);

之后，您可以像这样创建您的Vuetify组件：/resources/js/Components/NavigationDrawers.vue ，使用来自Vuetify实验室的代码。
在 /resources/js/Pages/Dashboard.vue 中初始化此Vue组件，如下所示：<navigation-drawers/> ，并调用import NavigationDrawers from '@/Components/NavigationDrawers'和NavigationDrawers在<script>中。

例子：

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

这有助于您将 Vuetify 配置到您的项目中。Sass 和其他配置可以自行配置。

导航抽屉的示例截图

导航抽屉的第二个示例截图