pupbrained-xyz-nuxt/app.vue

<template>
  <select
    v-model='selectedFont'
    :disabled='loading'
    @change='updateFont'
  >
    <option
      v-for='(value, key) in fonts'
      :key='key'
      :value='key'
    >
      {{ value.name }}
    </option>
  </select>
  <select
    v-model='selectedTheme'
    :disabled='loading'
    @change='updateTheme'
  >
    <option
      v-for='(value, key) in themes'
      :key='key'
      :value='key'
    >
      {{ value.name }}
    </option>
  </select>
  <NuxtRouteAnnouncer />
  <NuxtPage />
</template>

<script setup>
import { themes } from '~/types/themes'
import { fonts } from '~/types/fonts'

const { theme, setTheme } = useTheme()
const selectedTheme = ref('')

const { font, setFont } = useFont()
const selectedFont = ref('')
const loading = ref(true)

onMounted(() => {
  selectedTheme.value = theme.value
  selectedFont.value = font.value
  loading.value = false
})

const updateTheme = () => {
  setTheme(selectedTheme.value)
}

const updateFont = () => {
  setFont(selectedFont.value)
}

useHead({
  bodyAttrs: {
    class: 'bg-bg',
  },
})
</script>