pupbrained/pupbrained-xyz-nuxt
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

vue macros

Browse source
This commit is contained in:
Mars 2024-08-27 00:11:09 -04:00
parent 28fc33cd82
commit 443c21c106
Signed by: pupbrained
GPG key ID: 874E22DF2F9DFCB5
6 changed files with 14 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

14
components/FontSwitcher.vue
View file

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

16
components/ThemeSwitcher.vue
View file

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

2
nuxt.config.ts
View file

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

1
package.json
View file

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

14
pages/about.vue
View file

@ -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>