how to add global filter with inertia vue3-CodePudding

I'm using Inertia and Vue 3 with Laravel. I need to know how to add global filters.

I tried to use this referrance but it didn't work.

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)
            .mixin({methods: {route}})
            .mount(el);
    },
});

CodePudding user response：

As mentioned in the blog post you linked to (and the Vue.js 3 migration guide), filters have been removed in v3 of Vue.js. The suggestion in the migration guide is to add a global property.

You can do this in your example with the following:

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

        const app =  createApp({render: () => h(App, props)})
            .use(plugin)
            .mixin({methods: {route}});

        app.config.globalProperties.$filters = {
            currency(value) {
                return '$'   new Intl.NumberFormat('en-US').format(value)
            },
            // Put the rest of your filters here
        }

        app.mount(el);
    },
});

Please note that I've updated the setup property name from app to App as per the vue 3 example in Intertia's documentation.

You could then use this "filter" in your code using the $filters property:

<p>{{ $filters.currency(amount) }}</p>