title: Create a global filter in Vue 3 using TypeScript
body: <p>I'm following this <a href="https://www.udemy.com/course/learn-full-stack-vue-net-core-postgres/" rel="nofollow noreferrer">course on Udemy</a> but its content is outdated so I can't follow the same steps that the author has followed to create a global filter.</p>
  <p>Also it looks like from Vue 3 documentation, <a href="https://v3-migration.vuejs.org/breaking-changes/filters.html#_3-x-update" rel="nofollow noreferrer">filters are no longer supported</a>.</p>
  <p>What I'm trying to do here is fairly simple, it just needs to take a price as a number and return it as string dollar price, for eg: take <code>100</code> and return <code>$100</code>.</p>
  <p>This doesn't work for me.
  My <code>main.ts</code> looks like this:</p>
  <pre><code>import { createApp } from &quot;vue&quot;;
  import { Vue } from 'vue-class-component';
  import { viewDepthKey } from &quot;vue-router&quot;;
  import App from &quot;./App.vue&quot;;
  import router from &quot;./router&quot;;
  import store from &quot;./store&quot;;
  
  Vue.filter('price', function(input: number){
    if(isNaN(input)){
      return &quot;-&quot;;
    }
    return '$' + input.toFixed(2);
  })
  
  createApp(App)
    .use(store)
    .use(router)
    .mount(&quot;#app1&quot;);
  </code></pre>
  <p>This is the error:</p>
  <pre><code>src/main.ts:8:5
  TS2339: Property 'filter' does not exist on type 'VueConstructor&lt;Vue&lt;unknown, {}, {}&gt;&gt;'.
       6 | import store from &quot;./store&quot;;
       7 |
    &gt;  8 | Vue.filter('price', function(input: number){
         |     ^^^^^^
       9 |   if(isNaN(input)){
      10 |     return &quot;-&quot;;
      11 |   }
  </code></pre>
  <p>This is how I'm trying to use it in the template:</p>
  <pre><code>{{ item.product.price | price }}
  </code></pre>
  <p>Is there a way to make it work or should I be using some <code>computed property</code>?</p>
  <p><strong>EDIT for a follow up question:</strong></p>
  <p>My class looks like this:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import { Options, Vue } from &quot;vue-class-component&quot;;
  import { IProductInventory } from &quot;@/types/Product&quot;;
  import format from &quot;@/helpers/format&quot;;
  
  @Options({
      name: &quot;Inventory&quot;,
      components: {}
  })
  export default class Inventory extends Vue{
      inventory:IProductInventory[] = //Coming from an api call
  }
  &lt;/script&gt;
  </code></pre>
  <p>Thank you!</p>