如何在 Laravel 8 模塊中使用 InertiaJS 加載 Vue 組件

Question

在 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 Inertia\Inertia;

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

我在assets/js/Pages/Admin/Index.vue中有一個頁面

我想加載這個。 但是給我錯誤：

[Vue 警告]：創建掛鈎時出錯：“錯誤：找不到模塊‘./Admin/Index’”

Answer 1

檢查您的 Index vue 頁面是否在此目錄中：resources/js/Page/Admin 如果是，則復制您的 Index vue 頁面中的所有內容並刪除 Index vue 文件。 再次重新創建文件，但這次確保您輸入了帶有 .vue 擴展名的文件，然后重試

Answer 2

Laravel 不再使用js文件夾中的assets文件夾。

所以正確的路徑應該是resources/js/app.js而不是Resources/assets/js/app.js

Answer 3

要做出慣性響應，請使用慣性渲染函數。 此方法采用組件名稱，並允許您傳遞道具和查看數據。

如何在 Laravel 8 模塊中使用 InertiaJS 加載 Vue 組件

問題描述

3 個解決方案

解決方案1
0 2021-01-08 07:43:53

解決方案2
0 2021-05-26 13:01:05

解決方案3
0 2022-12-20 18:24:19

如何在 Laravel 8 模塊中使用 InertiaJS 加載 Vue 組件

問題描述

3 個解決方案

解決方案1 0 2021-01-08 07:43:53

解決方案2 0 2021-05-26 13:01:05

解決方案3 0 2022-12-20 18:24:19

解決方案1
0 2021-01-08 07:43:53

解決方案2
0 2021-05-26 13:01:05

解決方案3
0 2022-12-20 18:24:19