TS in Vue3

app/scripts/components/CorpusUpdates.vue

@@ -1,34 +1,27 @@
 <!-- @format -->
-<script setup>
+<script setup lang="ts">
 import { computed, ref } from "vue"
 import moment from "moment"
 import settings from "@/settings"
 import { loc, locObj } from "@/i18n"
 import { rootScope } from "@/vue-services"
-
-// type CorpusUpdatesScope = IScope & {
-//     LIMIT: number
-//     recentUpdates: CorpusTransformed[] | null
-//     recentUpdatesFiltered: CorpusTransformed[] | null
-//     expanded: boolean
-//     toggleExpanded: (to?: boolean) => void
-// }
+import { CorpusTransformed } from "@/settings/config-transformed.types"
 
 const LIMIT = 5
-const lang = ref(rootScope.lang)
-const recentUpdates = ref()
+const lang = ref<string>(rootScope.lang)
+const recentUpdates = ref<CorpusTransformed[]>([])
 const expanded = ref(false)
 
 const recentUpdatesFiltered = computed(() => recentUpdates.value.slice(0, expanded.value ? undefined : LIMIT))
 
-rootScope.$watch("lang", (value) => (lang.value = value))
+rootScope.$watch("lang", (value: string) => (lang.value = value))
 
 if (settings.frontpage?.corpus_updates) {
-    const limitDate = moment().subtract(12, "months")
+    const limitDate = moment().subtract(6, "months")
     // Find most recently updated corpora
     recentUpdates.value = settings.corpusListing.corpora
         .filter((corpus) => corpus.info.Updated && moment(corpus.info.Updated).isSameOrAfter(limitDate))
-        .sort((a, b) => b.info.Updated.localeCompare(a.info.Updated))
+        .sort((a, b) => b.info.Updated!.localeCompare(a.info.Updated!))
 }
 </script>
 

app/scripts/components/TabPreloader.vue

@@ -1,6 +1,6 @@
 <!-- @format -->
-<script setup>
-defineProps(["progress"])
+<script setup lang="ts">
+defineProps<{ progress?: number | string }>()
 </script>
 
 <template>

package.json

@@ -49,6 +49,7 @@
         "html-loader": "^4.0.0",
         "html-webpack-plugin": "^5.6.0",
         "jasmine-core": "^4.0.0",
+        "node-polyfill-webpack-plugin": "^4.0.0",
         "postcss-loader": "^7.0.0",
         "prettier": "^2.0.5",
         "protractor": "^5.4.2",

tsconfig.json

@@ -1,4 +1,8 @@
 {
+    // Adding lang="ts" to a Vue component produced error "browser is not defined".
+    // The `browser` usage is in the spec files, so include only app code.
+    // Test code is abandoned for now.
+    "include": ["app/**/*"],
     "compilerOptions": {
         "outDir": "./dist/",
         "sourceMap": true,

webpack.common.js

@@ -5,6 +5,7 @@ const Dotenv = require("dotenv")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
 const HtmlWebpackPlugin = require("html-webpack-plugin")
 const { VueLoaderPlugin } = require("vue-loader")
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
 
 // Read .env into process.env
 Dotenv.config()
@@ -48,6 +49,7 @@ module.exports = {
                     loader: "ts-loader",
                     options: {
                         configFile: path.resolve(__dirname, "tsconfig.json"),
+                        appendTsSuffixTo: [/\.vue$/],
                     },
                 },
                 exclude: /node_modules/,
@@ -182,6 +184,7 @@ module.exports = {
             __VUE_OPTIONS_API__: "false", // Enable if needed by 3rd party deps
         }),
         new VueLoaderPlugin(),
+        new NodePolyfillPlugin(),
     ],
     ignoreWarnings: [
         (e) => e.message.includes("Can't resolve 'custom"),