[Vuejs]-Vue.js – How to import a filter into a component from a separate file?

by

2👍

✅

For future reference, the reason this does not work is that the filter is defined within a script tag in a Vue (*.vue) file.

// MyFilter.vue

<script>
    export default function(val) {
        return val.toUpperCase();
    }
</script>

Vue files are for single file components and as default export from within the script tag in a Vue file, we usually emit a component options object.

When Vue tries to setup hot-reloading for MyFilter.vue file, it expects a component option. Checks whether the component is functional in the options. options.functional. And, in this case, the options is undefined. So, we get the error

Uncaught TypeError: Cannot read property ‘functional’ of undefined

So, the lesson to learn is that Vue files are for single file components, anything else, plain-old JS.

👤Prashant

Leave a comment