How to use app globalConfig using latest inertia implementation?

[dgvai]

Latest implementation of Inertia Laravel is:

//app.js
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(PrimeVue)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

In normal Vue3 apps, there is a way to setup global config, like:

app.config.globalProperties.$date = dayjs;

How to implement this one?

[dgvai]

I have also tried in this way, but still not working:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({ render: () => h(app, props) });

        VueApp.use(plugin)
            .use(PrimeVue)
            .mixin({ methods: { route } })
            .mount(el);

        VueApp.config.globalProperties.$date = dayjs;
    },
});

It shows error in pages like : _ctx.$date is not a function

[RobertBoes]

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({ render: () => h(app, props) });

        VueApp.config.globalProperties.$date = dayjs;

        VueApp.use(plugin)
            .use(PrimeVue)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

This should work. This way the global property is set before the app mounts, just like with plugins and mixins.

[reinink]

Yup, @RobertBoes is correct. 👍

[irfanahmad7272]

@RobertBoes you really saved my day 👍 ❤️

[phh]

Found this issue when this was not working for Vue3: https://inertiajs.com/routing

@reinink Any change to leave an example like this in the docs? Would love to add it myself, but doesn't seems like there is an Inertia docs repo I can contribute to. Feel free to send me in the right direction if there is 🙏 .

[abdusfauzi]

awesome @RobertBoes 👍

[TheHirschfield]

This issue still persists. I've tried it with the following example but still get constant warnings in the console for custom element config changes.

createInertiaApp({
    title: (title) =>`${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {

        const VueApp = createApp({ render: () => h(app, props) });

        VueApp.config.compilerOptions.isCustomElement = tag => tag.startsWith('css-');

        VueApp.use(plugin)
        .mixin({ methods: { route } })
        .mount(el);

        return VueApp;
    },
});

[jEstevezRod]

so @reinink, is not possible to use createApp() outside of setup() method of createInertiaApp? And if it is not possible, how it would possible to export that vue app instance outside?

[reinink]

@jEstevezRod Hey that's correct — for v1.0 we're hoping to just use the setup() method in createInertiaApp(), just to simplify the API surface area — and it also makes it easier to modify things between the createInertiaApp() function and the <App> component without creating breaking changes.

Is there any reason that you couldn't use the createInertiaApp() function instead of manually setting up the Vue instance?

[jayveeinfinity]

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({ render: () => h(app, props) });

        VueApp.config.globalProperties.$date = dayjs;

        VueApp.use(plugin)
            .use(PrimeVue)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

This should work. This way the global property is set before the app mounts, just like with plugins and mixins.

@RobertBoes Save the day! Thanks <3

[geneowak]

@reinink I think @RobertBoes's answer should be included in the docs. I thought of adding it here https://inertiajs.com/routing, but it doesn't seem to be the right place for it and thought of creating a section in the docs but still that doesn't seem right either, hence reaching out since out as you'd be in a better position to know where to add it. I think having it there would make life much easier, especially for people just starting out.

[jsponceA]

it's work for me:

setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .directive("tooltip", Tooltip)
            .directive("badge", BadgeDirective)
            .directive("ripple", Ripple)
            .directive("styleclass", StyleClass)
            .directive("focustrap", FocusTrap)
            .directive("animateonscroll", AnimateOnScroll)
            .use(plugin)
            .use(PrimeVue, {
                ripple: true,
                unstyled: true,
                pt: Aura,
            })
            .use(ToastService)
            .mixin({ methods: { $route: route } })
            .mount(el);
    },