使用Vue 3在InertiaJS中定义全局组件

Question

我正试图在Laravel 8.38 - InertiaJS 0.8.4上构建一个应用程序，我正在使用Vue 3作为我的前端堆栈。

我有多个布局，需要全局注册为Vue组件，这样我就可以在任何地方的应用程序中使用它。我不能这样做，我的代码：

import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
const el = document.getElementById('app');
const app = createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./../Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin);
app.component('app-market', () => import('./../layouts/AppMarketLayout')); //trying to import layout
app.mount(el);

在页面内部，我试图将这个布局组件称为：

<template>
<div>
<app-market-layout></app-market-layout>
</div>
</template>

无法获取，控制台中没有错误。

Answer 1

我有两个后端(管理面板(和前端(网站(的布局，实现如下。使用惯性默认中间件文件。

project/app/Http/Middleware/HandleInertiaRequests.php

class HandleInertiaRequests extends Middleware
{
protected $rootView = 'app';
public function rootView(Request $request)
{
if ($request->segment(1) == 'admin') {
return 'admin';
}
return parent::rootView($request);
}
public function version(Request $request)
{
return parent::version($request);
}
public function share(Request $request)
{
return array_merge(parent::share($request), [
//
]);
}
}

project/resources/js/Shared/Frontend/Layout/Layout.vue

<template>
<Header />
<slot />
<Footer />
</template>
<script>
import Header from '../Partials/Header'
import Footer from '../Partials/Footer'
export default {
components: {
Header,
Footer
},
name: "FrontendLayout"
}
</script>

project/resources/js/Pages/Frontend/Auth/Login.vue

<template>
...
</template>
<script>
import Layout from '@/js/Shared/Frontend/Layouts/Layout';
export default {

layout: Layout,
metaInfo: { title: 'Login' },
data() {
return {
form: this.$inertia.form({
'email': '',
'password': '',
'remember': false
})
}
},
methods: {
submit() {
this.form.post(route('login.store'))
}
}
}
</script>

Answer 2

在Inertia JS中，全局导入组件与使用普通Vue配置相同

在您的app.js文件中，您需要导入组件(内联或在文件顶部(，然后在安装vue实例之前添加组件。您可以将其作为一个mixin来执行，也可以作为一个组件来执行。

因此，在您的情况下，配置应该如下所示：

import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
//Import the component:
import AppMarket from "./../layouts/AppMarketLayout"; 
const el = document.getElementById('app');
const app = createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./../Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.mixin({ components: { AppMarket } }) // << Then tell the inertia 
// instance to use the component. 
// You can also add this to the other mixin declaration
.use(InertiaPlugin)
.mount(el);

然后，在您的模板中，您可以使用如下组件：

<template>
<app-market>
</app-market>
</template>

我在你的原始帖子中注意到，你正试图将该组件用作应用程序市场布局。如果您计划导入具有该名称的组件，则必须导入该组件

app.js:中的配置如下所示

import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
//Import the component: Notice the component name change.
import AppMarketLayout from "./../layouts/AppMarketLayout"; 
const el = document.getElementById('app');
const app = createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./../Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.mixin({ components: { AppMarketLayout } }) // << Here the component name has Layout
.use(InertiaPlugin)

.mount(el);

然后在您的模板中：

<template>
<app-market-layout>
</app-market-layout>
</template>