load stylesheets

src/content-env.d.ts

@@ -4,6 +4,7 @@ declare module 'content/routes.js' {
 
   type GenericRouteDefinition = {
     id: string
+    stylesheetUrls: string[]
     template: Template
   }
 

src/main.vue

@@ -1,6 +1,31 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
-const ready = true
+import { useRouteStore } from 'src/routes'
+
+const ready = ref(false)
+
+const currentRoute = useRoute()
+const routeStore = useRouteStore()
+const routeConfig = routeStore._routes[currentRoute.path]
+
+const init = async () => {
+  const staleStylesheets = document.head.querySelectorAll('link[rel="stylesheet"]')
+  staleStylesheets.forEach(stylesheet => {
+    document.removeChild(stylesheet)
+  })
+
+  routeConfig.stylesheetUrls.forEach(stylesheet => {
+    const newElement = document.createElement('link')
+    newElement.setAttribute('rel', 'stylesheet')
+    newElement.setAttribute('href', stylesheet)
+    document.head.appendChild(newElement)
+  })
+  ready.value = true
+}
+
+init()
 </script>
 
 <template lang="pug">