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);
},
});
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>
titlemeant to be the filter? If not, please can you show what you "filter" you're trying to add.