diff --git a/babel.config.json b/babel.config.json
deleted file mode 100644
index 6425b3c..0000000
--- a/babel.config.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "plugins": ["@babel/plugin-transform-runtime"],
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "usage"
-      }
-    ]
-  ]
-}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d620beb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tool Reservations</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index ad557ca..e27809b 100644
--- a/package.json
+++ b/package.json
@@ -1,30 +1,26 @@
 {
-  "browserslist": [
-    "defaults",
-    "ios 9.3"
-  ],
   "scripts": {
-    "start": "parcel src/index.html"
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@vue/component-compiler-utils": "^3.0.0",
+    "@types/intl": "^1.2.0",
+    "@vitejs/plugin-legacy": "^1.6.2",
+    "@vitejs/plugin-vue": "^1.9.4",
     "sass": "^1.23.1",
     "typescript": "^4.2.3",
-    "vue-template-compiler": "^2.6.10"
+    "vite": "^2.6.13",
+    "vue-tsc": "^0.28.10"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.6.0",
+    "@fullcalendar/core": "^5.10.0",
     "@fullcalendar/google-calendar": "^5.6.0",
     "@fullcalendar/timegrid": "^5.6.0",
-    "@fullcalendar/vue": "^5.6.0",
-    "core-js": "^3.6.4",
+    "@fullcalendar/vue3": "^5.10.0",
     "equicolor": "^1.1.0",
     "intl": "^1.2.5",
-    "vue": "^2.6.10",
-    "vue-hot-reload-api": "^2.3.4",
-    "vue-property-decorator": "^9.1.2"
+    "vue": "^3.2.20"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index f787dd7..60bf107 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,18 +2,20 @@
   <FullCalendar ref="calendar" :options="calendarOptions"> </FullCalendar>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
 import equicolor from 'equicolor/src/Equicolor';
 
-import FullCalendar from '@fullcalendar/vue';
+import '@fullcalendar/core/vdom'; // solve problem with Vite
+import FullCalendar, {
+  EventInput,
+  Calendar,
+  CalendarOptions,
+} from '@fullcalendar/vue3';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import googleCalendarPlugin from '@fullcalendar/google-calendar';
 
-import { EventInput, CalendarOptions } from '@fullcalendar/core';
-import { Calendar } from '@fullcalendar/core';
-
 import { googleCalendarApiKey } from './secrets.json';
 
 const calendars: { [key: string]: string } = {
@@ -31,73 +33,66 @@ const colors: string[] = equicolor.findNextColors(
   Object.keys(calendars).length
 );
 
-@Component({ components: { FullCalendar } })
-export default class App extends Vue {
-  calendarOptions: CalendarOptions = {
-    plugins: [timeGridPlugin, dayGridPlugin, googleCalendarPlugin],
-    allDaySlot: false,
-    nowIndicator: true,
-    initialView: 'timeGridWeek',
-    height: 'auto',
-    googleCalendarApiKey,
-    slotMinTime: '8:00',
-    slotMaxTime: '22:00',
-    businessHours: {
-      daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
-      startTime: '10:00',
-      endTime: '21:00',
-    },
-    eventSources: Object.values(calendars).map((id, idx) => {
-      return {
-        googleCalendarId: id,
-        color: colors[idx],
-        eventDataTransform: this.eventDataTransform,
-      };
-    }),
-    slotLabelFormat: {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: false,
-    },
-    eventTimeFormat: {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: false,
-    },
-  };
+const calendarOptions: CalendarOptions = {
+  plugins: [timeGridPlugin, dayGridPlugin, googleCalendarPlugin],
+  allDaySlot: false,
+  nowIndicator: true,
+  initialView: 'timeGridWeek',
+  height: 'auto',
+  googleCalendarApiKey,
+  slotMinTime: '8:00',
+  slotMaxTime: '22:00',
+  businessHours: {
+    daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
+    startTime: '10:00',
+    endTime: '21:00',
+  },
+  eventSources: Object.values(calendars).map((id, idx) => {
+    return {
+      googleCalendarId: id,
+      color: colors[idx],
+      eventDataTransform: eventDataTransform,
+    };
+  }),
+  slotLabelFormat: {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  },
+  eventTimeFormat: {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  },
+};
 
-  toolFilter: string | null = null;
+const urlParams = new URLSearchParams(window.location.search);
+const toolFilter: string | null = urlParams.get('tool');
+const calendar_ref: Ref<InstanceType<typeof FullCalendar> | null> = ref(null);
 
-  created() {
-    // refresh data every five minutes
-    window.setInterval(this.refresh, 5 * 60 * 1000);
+// refresh data every five minutes
+window.setInterval(refresh, 5 * 60 * 1000);
 
-    const urlParams = new URLSearchParams(window.location.search);
-    this.toolFilter = urlParams.get('tool');
-  }
-
-  refresh() {
-    const calendarComponent = this.$refs.calendar as InstanceType<
-      typeof FullCalendar
-    >;
-    const calendar = calendarComponent.getApi() as Calendar;
+function refresh() {
+  if (calendar_ref.value !== null) {
+    const calendar = calendar_ref.value.getApi() as Calendar;
     calendar.refetchEvents();
   }
+}
 
-  eventDataTransform(eventData: EventInput): EventInput | false {
-    // clear the url to prevent clicking on the event
-    delete eventData.url;
+function eventDataTransform(eventData: EventInput): EventInput | false {
+  // clear the url to prevent clicking on the event
+  delete eventData.url;
 
-    const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
-    if (match) {
-      const [, member, shop, tool] = match;
-      eventData.title = `${tool} - ${member}`;
-      if (this.toolFilter === null || tool.includes(this.toolFilter)) {
-        return eventData;
-      }
+  const match = eventData?.title?.match(/([^\/]*) \| ([^-]*) - (.*)/);
+  if (match) {
+    const [, member, shop, tool] = match;
+    eventData.title = `${tool} - ${member}`;
+    if (toolFilter === null || tool.includes(toolFilter)) {
+      return eventData;
     }
-    return false;
   }
+  return false;
 }
 </script>
 
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index a0434ae..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<body>
-  <div id="app"></div>
-  <script src="index.ts"></script>
-</body>
diff --git a/src/index.ts b/src/index.ts
index 173cb05..4f612eb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,18 +1,7 @@
 import 'core-js/modules/es.object.entries';
 
-// TODO: could probably be a dynamic import
-import intl from 'intl';
-import 'intl/locale-data/jsonp/en.js';
+import * as Vue from 'vue';
 
-if (!window.Intl) {
-  // No `Intl`, so use and load the polyfill.
-  window.Intl = intl;
-}
+import App from './App.vue';
 
-import Vue from 'vue';
-
-import App from './App';
-
-let app = new Vue({
-  render: (h) => h(App),
-}).$mount('#app');
+const app = Vue.createApp(App).mount('#app');
diff --git a/tsconfig.json b/tsconfig.json
index 06e399d..8617c8a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "strict": true,
-    "module": "es2015",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true
-  }
+    "strict": true,
+    "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..92491e8
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    legacy({
+      targets: ['defaults', 'not IE 11', "ios 8.4"]
+    }),
+  ],
+});
