app.vue

<template>
  <section class="h-screen w-full flex flex-col items-center gap-10">
    <LazyHeader />

    <LazyEditor />

    <LazyFooter />

    <ScrollTop />
  </section>
</template>

<script setup lang="ts">
useServerSeoMeta({
  title: 'Nuxt Tiptap Editor Template',
  ogTitle: 'Nuxt Tiptap Editor Template',
  ogLocale: 'en_NG',
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
    userScalable: 'yes',
    viewportFit: 'cover',
  },
  charset: 'UTF-8',
})
useHead({
  htmlAttrs: {
    lang: 'en',
  },
  link: [
    { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
    { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
    },
  ],
})
</script>