Vue (volar in vs-code) does not recognizes filters

Question

I just created a simple test component like this:

    <template>
      <div>{{ value | currency }}</div>
    </template>
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Component({ filters: { currency: (v: number) => '$' + v } })
    export default class Test extends Vue {
      value: number = 10;
    }
    </script>

but i'm receiving the following error

Property 'currency' does not exist on type 'Test'.ts(2339)

Important to know that there is no problem vue-cli build or serve. the error only appears on the user interface.

i'm using

• VSCode volar 1.0.3 extension on ubuntu,
• vue@^2.6.14
• vue-class-component@^7.2.6

How to solve this error on user interface?

---

This is a minimal reproducible example, the problem here is installing filter packages like: vue-currency-filter and those filters are nor recognized by the GUI.

Answer 1

Even if you find a solution to your issue, I still recommend that you do not use filters because the API was removed in Vue3: https://v3-migration.vuejs.org/breaking-changes/filters.html

Since Vue3 is the official stable version right now, there is no point using an API that will have no future. (it was already deprecated in Vue2 for a long time)

You could instead use a regular method call or a computed.

PS: also you probably need to give it a specific typo of filter or alike, but since it's deprecated I'm not sure that it's even a thing. Would be better to ignore that one down the road IMO.