pupbrained-xyz-nuxt/components/NavBar.vue

<template>
  <div
    flex
    gap-2
    pb-2
  >
    <DropDown
      v-model='fontCookie'
      :options='fonts'
      default-option='JetBrains Mono'
      cookie-name='font'
    />
    <DropDown
      v-model='themeCookie'
      :options='themes'
      default-option='Catppuccin Mocha'
      cookie-name='theme'
    />
  </div>
</template>

<script setup lang="ts">
import { fonts, themes } from '#imports'

// These should never be null so it's fine to use `as Ref`
const fontCookie = useCookie('font') as Ref<string>
const themeCookie = useCookie('theme') as Ref<string>
</script>