如何在Laravel 8模块中使用InertiaJS加载Vue组件



使用Laravel模块包

在Laravel 8中,我们可以用Inertiajs 加载组件

我们用这个@inertia初始化app.blade.php中的Inertia

之后在app.js文件中,我们可以这样初始化它:

const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);

然后将从Pages文件夹加载所有组件。

现在,我的问题是:

我如何在模块中实现它?我想使用Inertiajs加载Vuejs组件。在模块中,此Resources/assets/js/app.js文件为空。如果我把上面的代码放进去,创建一个Pages文件夹,但它会给我错误!

import { createApp, h } from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue3'
const el = document.getElementById('app')
createApp({
render: () => h(App, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
})
}).use(plugin).mount(el)

在核心(我做了这个(模块master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module Core</title>
<link rel="stylesheet" href="{{ mix('css/core.css') }}">
</head>
<body>
@inertia
<script src="{{ mix('js/core.js') }}"></script>
</body>
</html>

核心控制器:

use InertiaInertia;
class CoreController extends Controller
{
public function index()
{
return Inertia::render('Admin/Index');
}
}

我在assets/js/Pages/Admin/Index.vue中有一个页面

我想加载这个。但给我一个错误:

[Vue warn]:创建钩子时出错:"错误:找不到模块"/管理员/索引">

检查您的Index vue页面是否在以下目录中:resources/js/page/Admin如果是,请复制Index vue页面中的所有内容,并删除Index vue文件。再次重新创建文件,但这次请确保键入的文件扩展名为.vue然后重试

Laravel不再在js文件夹中使用assets文件夹。

所以正确的道路应该是resources/js/app.js而非Resources/assets/js/app.js

若要生成Inertia响应,请使用Inertia渲染函数。此方法采用组件名称,并允许您传递道具和查看数据。

相关内容

  • 没有找到相关文章

最新更新