migration: remove use of filters + set compiler to v3 mode

src/app.js

@@ -4,16 +4,10 @@ import { createStore } from './store'
 import { createRouter } from './router'
 import { sync } from 'vuex-router-sync'
 import titleMixin from './util/title'
-import * as filters from './util/filters'
 
 // mixin for handling title
 Vue.mixin(titleMixin)
 
-// register global utility filters.
-Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
-
 // Expose a factory function that creates a fresh set of store, router,
 // app instances on each call (which is called for each SSR request)
 export function createApp () {

src/components/Comment.vue

@@ -2,7 +2,7 @@
   <li v-if="comment" class="comment">
     <div class="by">
       <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
-      {{ comment.time | timeAgo }} ago
+      {{ timeAgo(comment.time) }} ago
     </div>
     <div class="text" v-html="comment.text"></div>
     <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length">
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { timeAgo } from '../util/filters'
+
 export default {
   name: 'comment',
   props: ['id'],
@@ -33,6 +35,7 @@ export default {
     }
   },
   methods: {
+    timeAgo,
     pluralize: n => n + (n === 1 ? ' reply' : ' replies')
   }
 }

src/components/Item.vue

@@ -4,7 +4,7 @@
     <span class="title">
       <template v-if="item.url">
         <a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
-        <span class="host"> ({{ item.url | host }})</span>
+        <span class="host"> ({{ host(item.url) }})</span>
       </template>
       <template v-else>
         <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
@@ -16,7 +16,7 @@
         by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
       </span>
       <span class="time">
-        {{ item.time | timeAgo }} ago
+        {{ timeAgo(item.time) }} ago
       </span>
       <span v-if="item.type !== 'job'" class="comments-link">
         | <router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
@@ -27,10 +27,14 @@
 </template>
 
 <script>
-import { timeAgo } from '../util/filters'
+import { timeAgo, host } from '../util/filters'
 
 export default {
   name: 'news-item',
+  methods: {
+    timeAgo,
+    host
+  },
   props: ['item'],
   // http://ssr.vuejs.org/en/caching.html#component-level-caching
   serverCacheKey: ({ item: { id, __lastUpdated, time }}) => {

src/views/ItemView.vue

@@ -6,12 +6,12 @@
           <h1>{{ item.title }}</h1>
         </a>
         <span v-if="item.url" class="host">
-          ({{ item.url | host }})
+          ({{ host(item.url) }})
         </span>
         <p class="meta">
           {{ item.score }} points
           | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
-          {{ item.time | timeAgo }} ago
+          {{ timeAgo(item.time) }} ago
         </p>
       </div>
       <div class="item-view-comments">
@@ -30,6 +30,7 @@
 <script>
 import Spinner from '../components/Spinner.vue'
 import Comment from '../components/Comment.vue'
+import { host, timeAgo } from '../util/filters'
 
 export default {
   name: 'item-view',
@@ -67,6 +68,8 @@ export default {
   },
 
   methods: {
+    host,
+    timeAgo,
     fetchComments () {
       if (!this.item || !this.item.kids) {
         return

vite.config.js

@@ -13,7 +13,7 @@ export default defineConfig({
       template: {
         compilerOptions: {
           compatConfig: {
-            MODE: 2
+            MODE: 3
           }
         }
       }