vue macros

components/FontSwitcher.vue

@@ -2,7 +2,7 @@
   <select
     v-model='selectedFont'
     :disabled='loading'
-    @change='updateFont'
+    @change='setFont(selectedFont)'
   >
     <option
       v-for='(value, key) in fonts'
@@ -15,14 +15,12 @@
 </template>
 
 <script setup lang="ts">
-const { font, setFont } = useFont()
-const selectedFont = ref('')
-const loading = ref(true)
+const { font, setFont } = $(useFont())
+let selectedFont = $ref('')
+let loading = $ref(true)
 
 onMounted(() => {
-  selectedFont.value = font.value
-  loading.value = false
+  selectedFont = font
+  loading = false
 })
-
-const updateFont = () => setFont(selectedFont.value)
 </script>

components/ThemeSwitcher.vue

@@ -2,7 +2,7 @@
   <select
     v-model='selectedTheme'
     :disabled='loading'
-    @change='updateTheme'
+    @change='setTheme(selectedTheme)'
   >
     <option
       v-for='(value, key) in themes'
@@ -15,16 +15,12 @@
 </template>
 
 <script setup lang="ts">
-const { theme, setTheme } = useTheme()
-const selectedTheme = ref('')
-const loading = ref(true)
+const { theme, setTheme } = $(useTheme())
+let selectedTheme = $ref('')
+let loading = $ref(true)
 
 onMounted(() => {
-  selectedTheme.value = theme.value
-  loading.value = false
+  selectedTheme = theme
+  loading = false
 })
-
-const updateTheme = () => {
-  setTheme(selectedTheme.value)
-}
 </script>

nuxt.config.ts

@@ -3,7 +3,7 @@ import { fonts } from './utils/fonts'
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
-  modules: ['@unocss/nuxt', '@vueuse/nuxt', '@nuxt/eslint'],
+  modules: ['@unocss/nuxt', '@vueuse/nuxt', '@nuxt/eslint', '@vue-macros/nuxt'],
   eslint: {
     config: {
       stylistic: {

package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^0.5.2",
     "@unocss/nuxt": "^0.62.3",
+    "@vue-macros/nuxt": "^1.11.6",
     "@vueuse/nuxt": "^11.0.3"
   }
 }

pages/about.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-</script>
-
-<template>
-  <div>
-    <h1>Nuxt Routing set up successfully!</h1>
-    <p>Current route: {{ route.path }}</p>
-    <a
-      href='https://nuxt.com/docs/getting-started/routing'
-      target='_blank'
-    >Learn more about Nuxt Routing</a>
-  </div>
-</template>