Font Switcher — Vue

---
import FontSwitcher from '../components/astro/FontSwitcher.astro';
---

<FontSwitcher label="Font" client:load />

<!-- Rizzo CSS. Script runs on DOMContentLoaded for [data-font-switcher]. -->
<div class="font-switcher" data-font-switcher>...</div>

<script>
  import { FontSwitcher } from '$lib/rizzo';
</script>

<FontSwitcher label="Font" />

<script setup>
import FontSwitcher from '@/components/rizzo/FontSwitcher.vue';
</script>

<template>
  <FontSwitcher
    :fonts="[
      { id: 'system', label: 'System' },
      { id: 'sans-mono', label: 'Sans + Mono' },
    ]"
  />
</template>

import { FontSwitcher } from './components/react';

<FontSwitcher fonts={[
  { id: 'system', label: 'System' },
  { id: 'sans-mono', label: 'Sans + Mono' },
]} />