Enable Typescript

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
   'extends': [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
+    '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {

.vscode/tasks.json

@@ -52,28 +52,35 @@
             "problemMatcher": []
         },
         {
-            "label": "npm run dev",
+            "label": "webpack:dev",
             "type": "shell",
             "options": {},
             "command": "npm run dev",
             "problemMatcher": [],
             "group": "build"
         },
         {
-            "label": "npm run dev-server (HMR)",
+            "label": "webpack:dev-server (HMR)",
             "type": "shell",
             "options": {},
             "command": "npm run dev-server",
             "problemMatcher": [],
             "group": "build"
         },
         {
-            "label": "npm run watch",
+            "label": "webpack:watch",
             "type": "shell",
             "options": {},
             "command": "npm run watch",
             "problemMatcher": []
         },
+        {
+            "label": "webpack:build",
+            "type": "shell",
+            "options": {},
+            "command": "npm run build",
+            "problemMatcher": []
+        },
         {
             "label": "lint",
             "type": "shell",
@@ -87,6 +94,27 @@
             "options": {},
             "command": "npm run format",
             "problemMatcher": []
+        },
+        {
+            "label": "vite:dev",
+            "type": "shell",
+            "options": {},
+            "command": "npm run vite:dev",
+            "problemMatcher": []
+        },
+        {
+            "label": "vite:build",
+            "type": "shell",
+            "options": {},
+            "command": "npm run vite:build",
+            "problemMatcher": []
+        },
+        {
+            "label": "vite:preview",
+            "type": "shell",
+            "options": {},
+            "command": "npm run vite:preview",
+            "problemMatcher": []
         }
     ]
 }

app/assets/views/HomeView.vue

@@ -1,8 +1,24 @@
+<script setup lang="ts">
+interface User {
+    firstName: string
+    lastName: string
+    role: string
+}
+
+const user: User = {
+    firstName: "Angela",
+    lastName: "Davis",
+    role: "Professor",
+}
+
+const helloMsg: string = 'Hello ' + user.firstName + ' ' + user.lastName + '!'
+</script>
+
 <template>
     <article class="uk-article">
-        <h1 class="uk-article-title"><a class="uk-link-reset" href="#">Hello!</a></h1>
+        <h1 class="uk-article-title"><a class="uk-link-reset" href="#">{{ helloMsg }}</a></h1>
         <p class="uk-article-meta">
-            Written by <a href="#">John Appleseed</a> on 29 September 2018.
+            Written by <a href="#">{{user.firstName}} {{ user.lastName }}</a>, {{ user.role }} on 29 September 2018.
         </p>
         <p class="uk-text-lead">
             This is a demo of UserFrosting using a custom UiKit based template built using Vue 3.0

app/templates/pages/index.html.twig

@@ -16,7 +16,7 @@
     </noscript>
     <div id="app"></div>
     {{ encore_entry_script_tags('app') }}
-    {# <script type="module" src="http://[::1]:3000/main.js"></script> #}
+    {# <script type="module" src="http://[::1]:3000/main.ts"></script> #}
     {# <script type="module" src="./assets/main-CNFAaDZc.js"></script> #}
   </body>
 </html>

env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+/**
+ * This is required for webpack to correctly import vue file when using TypeScript.
+ */ 
+declare module '*.vue' {
+    const content: any;
+    export default content;
+}