diff --git a/package-lock.json b/package-lock.json
index ba83013..f59ba46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "@nextcloud/eslint-config": "^8.4.2",
         "@nextcloud/stylelint-config": "^3.1.0",
         "@nextcloud/vite-config": "^2.5.0",
+        "@vue/tsconfig": "^0.8.1",
+        "typescript": "^5.9.2",
         "vite": "^7.1.7"
       },
       "engines": {
@@ -1282,6 +1284,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/@microsoft/api-extractor/node_modules/typescript": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/@microsoft/tsdoc": {
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.1.tgz",
@@ -2775,6 +2791,25 @@
       "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
       "license": "MIT"
     },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.8.1.tgz",
+      "integrity": "sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "5.x",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vuepic/vue-datepicker": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
@@ -10834,9 +10869,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index 1dc2d23..c7322c5 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,14 @@
   "name": "app_template",
   "version": "1.0.0",
   "license": "AGPL-3.0-or-later",
-  "engines": {
-    "node": "^22.0.0",
-    "npm": "^10.5.0"
-  },
+  "type": "module",
   "scripts": {
     "build": "vite build",
     "dev": "vite --mode development build",
-    "watch": "vite --mode development build --watch",
     "lint": "eslint src",
-    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css"
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
+    "watch": "vite --mode development build --watch"
   },
-  "type": "module",
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
@@ -26,6 +22,12 @@
     "@nextcloud/eslint-config": "^8.4.2",
     "@nextcloud/stylelint-config": "^3.1.0",
     "@nextcloud/vite-config": "^2.5.0",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "^5.9.2",
     "vite": "^7.1.7"
+  },
+  "engines": {
+    "node": "^22.0.0",
+    "npm": "^10.5.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index d5d6257..dfd671e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,18 @@
+<script setup lang="ts">
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcContent from '@nextcloud/vue/components/NcContent'
+</script>
+
 <template>
 	<NcContent app-name="app_template">
-		<NcAppContent>
+		<NcAppContent :class="$style.content">
 			<h2>Hello world!</h2>
 		</NcAppContent>
 	</NcContent>
 </template>
 
-<script>
-
-import { NcAppContent, NcContent } from '@nextcloud/vue'
-
-export default {
-	name: 'App',
-	components: {
-		NcContent,
-		NcAppContent,
-	},
-}
-</script>
-
-<style scoped lang="scss">
-main {
+<style module>
+.content {
 	display: flex;
 	justify-content: center;
 	margin: 16px;
diff --git a/src/main.js b/src/main.ts
similarity index 100%
rename from src/main.js
rename to src/main.ts
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ee07db6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"extends": "@vue/tsconfig",
+	"include": ["./src/**/*.ts", "./src/**/*.vue"],
+	"compilerOptions": {
+		"erasableSyntaxOnly": true,
+		"outDir": "js",
+		"rootDir": "src"
+	},
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index d75c027..0000000
--- a/vite.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createAppConfig } from "@nextcloud/vite-config";
-import { join, resolve } from "path";
-
-export default createAppConfig(
-  {
-    main: resolve(join("src", "main.js")),
-  },
-  {
-    createEmptyCSSEntryPoints: true,
-    extractLicenseInformation: true,
-    thirdPartyLicense: false,
-  }
-);
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b235048
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import { createAppConfig } from '@nextcloud/vite-config'
+import { join, resolve } from 'path'
+
+export default createAppConfig(
+	{
+		main: resolve(join('src', 'main.js')),
+	},
+	{
+		createEmptyCSSEntryPoints: true,
+		extractLicenseInformation: true,
+		thirdPartyLicense: false,
+	},
+)