diff --git a/index.html b/index.html
index a0434ae..ad9316c 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,10 @@
-<body>
-  <div id="app"></div>
-  <script src="index.ts"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
diff --git a/index.ts b/index.ts
deleted file mode 100644
index 0ee0609..0000000
--- a/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Vue from 'vue';
-
-import App from './App';
-
-let app = new Vue({
-  render: (h) => h(App),
-}).$mount('#app');
diff --git a/package.json b/package.json
index 816c9fa..8d8ff02 100644
--- a/package.json
+++ b/package.json
@@ -7,13 +7,20 @@
     "jsbarcode": "^3.11.0",
     "number-to-words": "^1.2.4",
     "qrcode": "^1.4.4",
-    "vue": "^2.6.11",
-    "vue-hot-reload-api": "^2.3.4",
-    "vue-property-decorator": "^8.4.0"
+    "vue": "^3.2.20"
   },
   "devDependencies": {
-    "@vue/component-compiler-utils": "^3.1.1",
-    "typescript": "^3.8.3",
-    "vue-template-compiler": "^2.6.11"
+    "@types/number-to-words": "^1.2.1",
+    "@types/qrcode": "^1.4.1",
+    "@vitejs/plugin-vue": "^1.9.3",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.11",
+    "vue-tsc": "^0.28.8"
+  },
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
   }
 }
diff --git a/App.vue b/src/App.vue
similarity index 55%
rename from App.vue
rename to src/App.vue
index b757a3a..1597fc3 100644
--- a/App.vue
+++ b/src/App.vue
@@ -5,23 +5,27 @@
       :asset="asset"
       :key="asset.id"
     >
-      <component :is="asset.category.name + 'LabelText'" :asset="asset" />
+      <component
+        :is="component(asset.category.name)"
+        :asset="asset"
+      ></component>
     </AssetLabel>
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
-
+<script setup lang="ts">
 import snipeit from './snipeit';
 import AssetLabel from './AssetLabel.vue';
 import ComputersLabelText from './ComputersLabelText.vue';
 
-import assets from './computers.json';
+import assets_raw from '/computers.json';
+const assets: { rows: [snipeit.Hardware]; total: number } = assets_raw;
 
-@Component({ components: { AssetLabel, ComputersLabelText } })
-export default class App extends Vue {
-  assets: { rows: [snipeit.Hardware]; total: number } = assets;
+function component(category: string) {
+  switch (category) {
+    case 'Computers':
+      return ComputersLabelText;
+  }
 }
 </script>
 
diff --git a/AssetLabel.vue b/src/AssetLabel.vue
similarity index 69%
rename from AssetLabel.vue
rename to src/AssetLabel.vue
index 8786ebf..1cef404 100644
--- a/AssetLabel.vue
+++ b/src/AssetLabel.vue
@@ -14,35 +14,36 @@
   </article>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+<script setup lang="ts">
+import { ref, Ref, onMounted, defineProps } from 'vue';
 import JsBarcode from 'jsbarcode';
 import QRCode from 'qrcode';
 
 import snipeit from './snipeit';
 
-@Component
-export default class AssetLabel extends Vue {
-  QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
+const QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
 
-  @Prop(Object) readonly asset: snipeit.Hardware;
+const props = defineProps<{
+  asset: snipeit.Hardware;
+}>();
 
-  qrcode_dataURL: string | null = null;
+const qrcode_dataURL: Ref<string> = ref('');
 
-  async mounted() {
-    this.qrcode_dataURL = await QRCode.toDataURL(
-      this.QRCODE_BASE + this.asset.asset_tag,
-      {
-        margin: 0,
-      }
-    );
+const barcode = ref(null);
 
-    JsBarcode(this.$refs.barcode, this.asset.asset_tag, {
-      displayValue: false,
+onMounted(async () => {
+  qrcode_dataURL.value = await QRCode.toDataURL(
+    QRCODE_BASE + props.asset.asset_tag,
+    {
       margin: 0,
-    });
-  }
-}
+    }
+  );
+
+  JsBarcode(barcode.value, props.asset.asset_tag, {
+    displayValue: false,
+    margin: 0,
+  });
+});
 </script>
 
 <style>
diff --git a/ComputersLabelText.vue b/src/ComputersLabelText.vue
similarity index 54%
rename from ComputersLabelText.vue
rename to src/ComputersLabelText.vue
index 7f4edfb..7e39f43 100644
--- a/ComputersLabelText.vue
+++ b/src/ComputersLabelText.vue
@@ -10,30 +10,32 @@
   </span>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+<script setup lang="ts">
+import { computed, ComputedRef, defineProps } from 'vue';
+
 import { toWords as numberToWords } from 'number-to-words';
 
 import snipeit from './snipeit';
 
-@Component
-export default class ComputersLabelText extends Vue {
-  @Prop(Object) readonly asset: snipeit.Hardware;
+const props = defineProps<{
+  asset: snipeit.Hardware;
+}>();
 
-  get emoji() {
-    return this.asset.name.includes('Laptop')
-      ? '💻'
-      : this.asset.name.includes('Desktop')
-      ? '🖥'
-      : '?';
-  }
-  get name() {
-    return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
-  }
+const emoji: ComputedRef<string> = computed(() => {
+  return props.asset.name.includes('Laptop')
+    ? '💻'
+    : props.asset.name.includes('Desktop')
+    ? '🖥'
+    : '?';
+});
 
-  getCustom(field) {
-    return this.asset.custom_fields[field]?.value;
-  }
+const name: ComputedRef<string> = computed(() => {
+  const number = props.asset.name.match(/[0-9]+$/)?.[0];
+  return numberToWords(number ?? '??').toUpperCase();
+});
+
+function getCustom(field: string) {
+  return props.asset.custom_fields[field]?.value;
 }
 </script>
 
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..c825278
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,6 @@
+import * as Vue from 'vue';
+
+import App from './App.vue';
+
+const app = Vue.createApp(App)
+  .mount('#app');
diff --git a/snipeit.d.ts b/src/snipeit.d.ts
similarity index 100%
rename from snipeit.d.ts
rename to src/snipeit.d.ts
diff --git a/tsconfig.json b/tsconfig.json
index cc57508..8617c8a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
     "strict": true,
-    "module": "es2015",
-    "moduleResolution": "node"
-  }
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..05c1740
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
