How to add a bunch of global filters in Vue.js?

Question

I want to make use of a few global filters in a Vue.js app. I know I need to define them before my main Vue instance, but sticking them all in the 'main.js' file doesn't seem right to me from a code organisation point of view. How could I have the definitions in a separate file, imported to 'main.js'? Can't quite get my head around the import/export stuff for this.

Answer 1

Create a filters.js file.

import Vue from "vue"  Vue.filter("first4Chars", str => str.substring(0, 4)) Vue.filter("last4Chars", str => str.substring(str.length - 4)) 

Import it into your main.js.

import Vue from 'vue' import App from './App' import "./filters"  new Vue({   el: '#app',   template: '<App/>',   components: { App }, }) 

Here is a working example.

Side note: If you get a "Vue not found" type of error, as a test try importing filters after the new Vue() declaration, like this:

import Vue from 'vue' import App from './App'  new Vue({   el: '#app',   template: '<App/>',   components: { App }, })  import "./filters" 

Answer 2

I think the best way is to use the pluginfeature from VueJS

1. Create a filters folder and put all of you filters there ...

   - filters   | - filter1.js   | - index.js 

2. In the filter file export the function you need, in this example I'll use a uppercase filter:

   export default function uppercase (input) {     return input.toUpperCase(); } 

3. In the index.js import and create a plugin:

   import uppercase from './filter1';   export default {      install(Vue) {          Vue.filter('uppercase', uppercase);      } } 

4. In you main.js file use it

   import filters from './filters'; import Vue from 'vue';  Vue.use(filters);