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

I am trying to integrate Highcharts with app.js in Laravel 8 with Vue and Inertia. I am trying to figure out how to pass HighchartsVue. I am trying to pass it to the use function for the createApp. However, I can’t access it in the templates.

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);

My template that tries to access the Vue Template. I haven’t included the entire template here.

Vue Template

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

For a global registration:

After you have installed “highcharts-vue” using:

npm install highcharts-vue

Register it globally as a plugin in your app.js with:

import HighchartsVue from 'highcharts-vue'

Next register it as a plugin in your vue object with:

Vue.use(HighchartsVue)

Please see the documentation here for more detailed instructions (and how to register it locally in the component).

After installing, your app.js would look something like this:

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);

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0