如何将 Vuetify 3 添加到 Laravel 8 Jetstream + 惯性

Posted 2023-03-21

【中文标题】如何将 Vuetify 3 添加到 Laravel 8 Jetstream + 惯性

【英文标题】：How do I add Vuetify 3 to Laravel 8 Jetsteam + inertia

【发布时间】：2021-11-22 12:29:21

【问题描述】：

我正在尝试使用 JetStream +惯性将vuetify 3 安装到 Laravel 8。我设法成功安装了 Vuetify 插件，但我不确定如何将插件包含到 app.js 中。

这是我的 app.js

require('./bootstrap');

import  createApp, h  from 'vue';
import  createInertiaApp  from '@inertiajs/inertia-vue3';
import  InertiaProgress  from '@inertiajs/progress';

import 'vuetify/styles';
import  createVuetify  from 'vuetify';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
const vuetify = createVuetify();

createInertiaApp(
    title: (title) => `$title - $appName`,
    resolve: (name) => require(`./Pages/$name.vue`),
    setup( el, app, props, plugin ) 
        return createApp( render: () => h(app, props) )
            .use(plugin)
            .mixin( methods:  route  )
            .mount(el);
    ,
);


InertiaProgress.init( color: '#4B5563' );

【参考方案1】：

import  createApp, h  from 'vue'
import  createInertiaApp  from '@inertiajs/inertia-vue3'
import  createVuetify  from 'vuetify'

createInertiaApp(
  resolve: name => require(`./Pages/$name`),
  setup( el, App, props, plugin ) 
    const vuetify = createVuetify(...)
    
    createApp( render: () => h(App, props) )
      .use(plugin)
      .use(vuetify)
      .mount(el)
  ,
)

【参考方案2】：

您可能需要导入组件和指令。

Laravel 8、Vue 3 和 InertiaJS 的示例：

require('./bootstrap');

import  createApp, h  from 'vue';
import  createInertiaApp  from '@inertiajs/inertia-vue3';
import  InertiaProgress  from '@inertiajs/progress';
import  createVuetify  from 'vuetify'
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp(
    title: (title) => `$title - $appName`,
    resolve: (name) => require(`./Pages/$name.vue`),
    setup( el, app, props, plugin ) 
        const vuetify = createVuetify( components, directives );

        return createApp( render: () => h(app, props) )
            .use(plugin)
            .use(vuetify)
            .mixin( methods:  route  )
            .mount(el);
    ,
);

InertiaProgress.init( color: '#4B5563' );