Laravel 8 Inertia HighCharts 未导入 app.js

Question

我正在尝试使用 Vue 和 Inertia 在 Laravel 8 中将 Highcharts 与 app.js 集成。我想弄清楚如何通过 HighchartsVue。我试图将它传递给 createApp 的使用函数。但是，我无法在模板中访问它。

App.js

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import HighCharts from ""
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

我的模板试图访问 Vue 模板。我没有在此处包含整个模板。

Vue 模板

<div>
    <highcharts :options="indexOptions"></highcharts>
</div>

Answer 1

全球注册：

安装“highcharts-vue”后使用：

npm install highcharts-vue

在您的 app.js 中将其全局注册为插件：

import HighchartsVue from 'highcharts-vue'

接下来将其注册为 vue 对象中的插件：

Vue.use(HighchartsVue)

请参阅文档 here 了解更详细的说明（以及如何在组件中本地注册它）。

安装后，您的 app.js 将如下所示：

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import HighchartsVue from 'highcharts-vue'
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

Vue.use(HighchartsVue);

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

Laravel 8 Inertia HighCharts 未导入 app.js

Laravel 8 Inertia HighCharts not being imported in the app.js

highcharts

inertiajs

laravel

vue.js

App.js

Vue 模板