chore: migrate to script setup style

layouts/components/themed.vue

@@ -4,18 +4,13 @@
   </div>
 </template>
 
-<script>
+<script setup lang='ts'>
 import { getCurrentInstance } from 'vue'
 import { useState } from '~/store'
 
-export default {
-  name: 'ThemedLayout',
-  setup () {
-    const instance = getCurrentInstance()
-    const state = useState()
-    if (instance) {
-      instance.proxy.$vuetify.theme.dark = state.darkMode
-    }
-  }
+const instance = getCurrentInstance()
+const state = useState()
+if (instance) {
+  instance.proxy.$vuetify.theme.dark = state.darkMode
 }
 </script>

layouts/default.vue

@@ -78,80 +78,63 @@
   </v-app>
 </template>
 
-<script>
+<script setup lang='ts'>
 
 import { computed, getCurrentInstance, provide, ref } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
-import Themed from './components/themed'
+import Themed from './components/themed.vue'
 import { useAuth } from '~/plugins/auth'
 import { useState } from '~/store'
 
-export default {
-  name: 'DefaultLayout',
-  components: {
-    Themed
-  },
-  setup () {
-    const instance = getCurrentInstance()
+const instance = getCurrentInstance()
+if (instance) {
+  provide(DefaultApolloClient, instance.proxy.$apollo)
+}
+const state = useState()
+const router = useRouter()
+const onRedirectCallback = (appState) => {
+  router.push(
+    appState && appState.targetUrl
+      ? appState.targetUrl
+      : window.location.pathname
+  )
+}
+const { loading, isAuthenticated, user, loginWithRedirect, logout } =
+  useAuth(onRedirectCallback)
+const doLogin = () => {
+  loginWithRedirect({
+    appState: { targetUrl: window.location.pathname }
+  })
+}
+const doLogout = () => {
+  logout({
+    logoutParams: {
+      returnTo: window.location.origin
+    }
+  })
+}
+const darkMode = computed({
+  get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
+  set: (val) => {
     if (instance) {
-      provide(DefaultApolloClient, instance.proxy.$apollo)
-    }
-    const state = useState()
-    const router = useRouter()
-    const onRedirectCallback = (appState) => {
-      router.push(
-        appState && appState.targetUrl
-          ? appState.targetUrl
-          : window.location.pathname
-      )
-    }
-    const { loading, isAuthenticated, user, loginWithRedirect, logout } =
-      useAuth(onRedirectCallback)
-    const doLogin = () => {
-      loginWithRedirect()
-    }
-    const doLogout = () => {
-      logout({
-        logoutParams: {
-          returnTo: window.location.origin
-        }
-      })
-    }
-    const darkMode = computed({
-      get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
-      set: (val) => {
-        if (instance) {
-          instance.proxy.$vuetify.theme.dark = val
-          state.setDarkMode(instance.proxy.$vuetify.theme.dark)
-        }
-      }
-    })
-    const locale = computed({
-      get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
-      set: (newLocale) => {
-        if (instance) {
-          instance.proxy.$i18n.setLocaleCookie(newLocale)
-          instance.proxy.$vuetify.lang.current = newLocale
-          instance.proxy.$i18n.locale = newLocale
-        }
-        state.setLocale(newLocale)
-      }
-    })
-
-    const nav = ref(false)
-    locale.value = instance.proxy.$i18n.locale
-
-    return {
-      title: state.title,
-      loading,
-      isAuthenticated,
-      user,
-      doLogin,
-      doLogout,
-      darkMode,
-      locale,
-      nav
+      instance.proxy.$vuetify.theme.dark = val
+      state.setDarkMode(instance.proxy.$vuetify.theme.dark)
     }
   }
-}
+})
+const locale = computed({
+  get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
+  set: (newLocale) => {
+    if (instance) {
+      instance.proxy.$i18n.setLocaleCookie(newLocale)
+      instance.proxy.$vuetify.lang.current = newLocale
+      instance.proxy.$i18n.locale = newLocale
+    }
+    state.setLocale(newLocale)
+  }
+})
+
+const nav = ref(false)
+locale.value = instance.proxy.$i18n.locale
+const title = computed(() => state.title)
 </script>