我如何添加Vuetify 3到Laravel 8 Jetsteam +惯性

Question

我试图安装vuetify 3与JetStream +惯性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' });

Answer 1

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

示例与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' });

Answer 2

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