docs: use nuxt 3 and website theme (#5479)

Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: pooya parsa <pyapar@gmail.com> Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
2024-11-21 21:25:11 +00:00 · 2022-10-06 11:15:30 +02:00 · 2022-10-06 11:15:30 +02:00 · dc47c64f14
commit dc47c64f14
parent 92ff066ab2
282 changed files with 12225 additions and 162745 deletions
--- a/.markdownlintignore
+++ b/.markdownlintignore
@ -2,3 +2,4 @@

 docs/content/index.md
 docs/content/**/*.nuxt.config.md
+docs/content/changelog.md
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -1,3 +1,4 @@
 schema
 **/*.configuration/nuxt.config.md
 **/*.configuration/nuxt-config.md
+static/sw.js
--- a/docs/.yarn/releases/yarn-1.23.0-20210103.1434.cjs
+++ b/docs/.yarn/releases/yarn-1.23.0-20210103.1434.cjs
--- a/docs/.yarn/releases/yarn-3.2.1.cjs
+++ b/docs/.yarn/releases/yarn-3.2.1.cjs
--- a/docs/.yarnrc.yml
+++ b/docs/.yarnrc.yml
@ -1 +1 @@
-yarnPath: .yarn/releases/yarn-1.23.0-20210103.1434.cjs
+yarnPath: .yarn/releases/yarn-3.2.1.cjs
--- a/docs/assets/nuxt.css
+++ b/docs/assets/nuxt.css
@ -1,30 +0,0 @@
-:root {
-  --header-height: theme('spacing.14');
-  --docs-scroll-margin-block: calc(var(--header-height) + 4rem);
-  --blogpost-scroll-margin-block: calc(var(--header-height));
-}
-
-@screen md {
-  :root {
-    --header-height: theme('spacing.18');
-    --blogpost-scroll-margin-block: calc(var(--header-height) - 0.5rem);
-  }
-}
-
-@screen xl {
-  :root {
-    --docs-scroll-margin-block: calc(var(--header-height) + 1rem);
-  }
-}
-
-button:focus-visible, div:focus-visible, a:focus-visible {
-  /* remove default focus style */
-  outline: none;
-  /* custom focus style */
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px #00DC82;
-}
-
-h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
-  font-size: inherit !important;
-}
--- a/docs/components/app/AlgoliaSearchBox.vue
+++ b/docs/components/app/AlgoliaSearchBox.vue
@ -1,194 +0,0 @@
-<template>
-  <div id="docsearch">
-    <button type="button" class="DocSearch DocSearch-Button" aria-label="Search">
-      <svg width="20" height="20" class="d-icon m-auto" viewBox="0 0 20 20">
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </button>
-  </div>
-</template>
-
-<script>
-function isSpecialClick (event) {
-  return event.button === 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey
-}
-
-export default {
-  props: {
-    options: {
-      type: Object,
-      required: true
-    },
-    settings: {
-      type: Object,
-      required: true
-    }
-  },
-  watch: {
-    '$i18n.locale' (newValue) {
-      this.update(this.options, newValue)
-    },
-    options (newValue) {
-      this.update(newValue, this.$i18n.locale)
-    }
-  },
-  mounted () {
-    this.initialize(this.options, this.$i18n.locale)
-  },
-  methods: {
-    stripTrailingSlash (url) {
-      return url.replace(/\/$|\/(?=\?)|\/(?=#)/g, '')
-    },
-    getRelativePath (absoluteUrl) {
-      const { pathname, hash } = new URL(absoluteUrl)
-      const url = pathname.replace(this.settings.url, '/') + hash
-      return this.stripTrailingSlash(url)
-    },
-    async initialize (userOptions, code) {
-      const lang = this.$i18n.locales.find(locale => locale.code === code)
-
-      const docsearch = await Promise.all([
-        import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
-        import(/* webpackChunkName: "docsearch" */ '@docsearch/css')
-      ]).then(([docsearch]) => docsearch.default)
-
-      docsearch({
-        ...userOptions,
-        container: '#docsearch',
-        searchParameters: {
-          ...((!lang)
-            ? {}
-            : {
-                facetFilters: [`${userOptions.langAttribute || 'language'}:${lang.iso}`].concat(
-                  userOptions.facetFilters || []
-                )
-              })
-        },
-        navigator: {
-          navigate: ({ itemUrl }) => {
-            const { pathname: hitPathname } = new URL(window.location.origin + itemUrl)
-
-            // Vue Router doesn't handle same-page navigation so we use
-            // the native browser location API for anchor navigation.
-            if (this.$router.history.current.path === hitPathname) {
-              window.location.assign(window.location.origin + itemUrl)
-            } else {
-              this.$router.push(itemUrl)
-            }
-          }
-        },
-        transformItems: (items) => {
-          return items.map((item) => {
-            return {
-              ...item,
-              url: this.getRelativePath(item.url)
-            }
-          })
-        },
-        hitComponent: ({ hit, children }) => {
-          return {
-            type: 'a',
-            constructor: undefined,
-            __v: 1,
-            props: {
-              href: hit.url,
-              children,
-              onClick: (event) => {
-                if (isSpecialClick(event)) {
-                  return
-                }
-
-                // We rely on the native link scrolling when user is
-                // already on the right anchor because Vue Router doesn't
-                // support duplicated history entries.
-                if (this.$router.history.current.fullPath === hit.url) {
-                  return
-                }
-
-                const { pathname: hitPathname } = new URL(window.location.origin + hit.url)
-
-                // If the hits goes to another page, we prevent the native link behavior
-                // to leverage the Vue Router loading feature.
-                if (this.$router.history.current.path !== hitPathname) {
-                  event.preventDefault()
-                }
-
-                this.$router.push(hit.url)
-              }
-            }
-          }
-        }
-      })
-    },
-    update (options, lang) {
-      return this.initialize(options, lang)
-    }
-  }
-}
-</script>
-
-<style lang="postcss">
-.DocSearch {
-  --docsearch-primary-color: #00dc82;
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-text-color: rgb(113, 113, 122);
-  --docsearch-modal-background: theme("colors.gray.100");
-  --docsearch-searchbox-shadow: 0 0 0 2px var(--docsearch-primary-color);
-  --docsearch-searchbox-background: var(--color-transparent);
-  --docsearch-searchbox-focus-background: var(--color-transparent);
-  --docsearch-hit-color: var(--color-gray-700);
-  --docsearch-hit-shadow: none;
-  --docsearch-logo-color: var(--docsearch-text-color);
-  --docsearch-muted-color: var(--color-gray-500);
-  --docsearch-container-background: rgb(244 244 245 / 55%);
-}
-
-.dark {
-  & .DocSearch {
-    --docsearch-text-color: rgb(146, 173, 173);
-    --docsearch-modal-background: theme("colors.secondary-darker");
-    --docsearch-modal-shadow: inset 1px 1px 0 0 #052f14, 0 3px 8px 0 #0b160d;
-    --docsearch-hit-color: var(--color-gray-300);
-    --docsearch-hit-background: theme("colors.secondary-darkest");
-    --docsearch-footer-background: theme("colors.secondary-darkest");
-    --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
-      0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-    --docsearch-container-background: rgb(0 30 38 / 64%);
-  }
-}
-
-.DocSearch-Container {
-  @apply blur-8;
-}
-.DocSearch-Modal {
-  @apply lg:rounded-xl !important;
-}
-.DocSearch-SearchBar {
-  @apply pb-1 !important;
-}
-.DocSearch-Button {
-  @apply rounded-sm w-12 h-12 m-auto bg-transparent hover:shadow-none focus:outline-none !important;
-}
-.DocSearch-Button > svg {
-  @apply mx-auto !important;
-}
-.DocSearch-Button-Key {
-  @apply hidden !important;
-}
-.DocSearch-Button-Placeholder {
-  @apply hidden !important;
-}
-.DocSearch-NoResults > .DocSearch-Screen-Icon > svg {
-  @apply mx-auto !important;
-}
-.DocSearch-Commands-Key {
-  @apply inline-flex items-center justify-center w-auto h-auto p-1 bg-none rounded shadow-none border light:border-gray-500 !important;
-}
-</style>
--- a/docs/components/app/AppAside.vue
+++ b/docs/components/app/AppAside.vue
@ -1,118 +0,0 @@
-<template>
-  <aside class="fixed z-50 lg:z-0 lg:static">
-    <div class="h-full overflow-auto pointer-events-none lg:overflow-visible">
-      <!-- scrim -->
-      <Transition name="fade">
-        <div
-          v-if="$menu.visible.value"
-          class="fixed top-0 left-0 z-0 w-full h-full pointer-events-auto d-bg-header d-blur-header lg:hidden"
-          @click.stop="$menu.toggle"
-        />
-      </Transition>
-
-      <!-- Desktop aside -->
-      <div
-        class="
-          hidden
-          lg:block
-          fixed
-          top-0
-          left-0
-          overflow-auto
-          pointer-events-auto
-          min-h-fill-available
-          h-screen
-          sticky
-          top-header
-          w-60
-        "
-      >
-        <div class="w-auto h-full overflow-auto">
-          <AsideNavigation />
-        </div>
-      </div>
-
-      <!-- Mobile aside -->
-      <Transition name="slide-from-left-to-left">
-        <div
-          v-show="$menu.visible.value"
-          class="
-            lg:hidden
-            fixed
-            top-0
-            left-0
-            w-auto
-            h-full
-            overflow-auto
-            pointer-events-auto
-            min-h-fill-available
-            border-r
-            dark:border-sky-darker
-            !w-base
-          "
-        >
-          <div class="w-auto h-full overflow-auto d-bg-header">
-            <div
-              class="flex items-center justify-between w-full px-0.5 sm:px-2 h-header d-aside-header-bg"
-            >
-              <button
-                class="transition-colors duration-200 d-secondary-text hover:d-secondary-text-hover focus:outline-none"
-                aria-label="backButton"
-                @click.stop="mobileBack"
-              >
-                <IconArrowLeft v-if="!mobileMainNav && layout.aside" class="p-3 w-12 h-12" />
-                <IconClose v-else class="p-3 w-12 h-12" />
-              </button>
-              <div class="flex items-center h-header space-x-1">
-                <GitHubButton />
-                <TwitterButton />
-                <ColorSwitcher padding="p-3" />
-              </div>
-            </div>
-
-            <AsideNavigation v-if="!mobileMainNav && layout.aside" />
-            <AsideHeaderNavigation v-else :links="links" />
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </aside>
-</template>
-
-<script lang="ts">
-import { defineComponent, useContext, ref, watch } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup () {
-    const { $docus, $menu } = useContext()
-
-    const mobileMainNav = ref(!$docus.layout.value.aside)
-
-    watch($menu.visible, (value, old) => {
-      if (value && !old && $docus.layout.value.aside) {
-        mobileMainNav.value = false
-      }
-    })
-
-    function mobileBack () {
-      if (!mobileMainNav.value) {
-        mobileMainNav.value = true
-      } else {
-        $menu.close()
-      }
-    }
-
-    return {
-      mobileMainNav,
-      mobileBack,
-      layout: $docus.layout
-    }
-  }
-})
-</script>
--- a/docs/components/app/AppFooter.vue
+++ b/docs/components/app/AppFooter.vue
@ -1,31 +0,0 @@
-<template>
-  <footer class="bg-cloud-surface dark:bg-sky-black text-center border-t dark:border-t-sky-darkest">
-    <div class="d-container mx-auto py-8 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
-      <div class="flex justify-center space-x-3 md:order-2">
-        <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener" class="footer-link">
-          <span class="sr-only">Twitter</span>
-          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-          </svg>
-        </a>
-        <a href="https://github.com/nuxt/framework" target="_blank" rel="noopener" class="footer-link">
-          <span class="sr-only">GitHub</span>
-          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-          </svg>
-        </a>
-      </div>
-      <div class="mt-3 md:mt-0 md:order-1">
-        <p class="text-center text-base">
-          <a href="https://nuxtjs.org" class="inline-flex items-center gap-1 font-medium hover:underline">Nuxt 2 documentation <IconArrowRight /></a>
-        </p>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<style scoped lang="postcss">
-.footer-link {
-  @apply text-cloud hover:text-cloud-dark dark:hover:text-cloud-light;
-}
-</style>
--- a/docs/components/app/AppHeader.vue
+++ b/docs/components/app/AppHeader.vue
@ -1,61 +0,0 @@
-<template>
-  <header class="d-header">
-    <div class="flex items-center h-full px-1 mx-auto max-w-7xl sm:px-3 lg:px-6">
-      <NavigationButton
-        aria-label="mobileMenu"
-        class="w-12 h-12 lg:hidden text-gray-300 hover:text-cloud-lighter"
-      />
-
-      <div class="flex items-center flex-1 justify-center lg:justify-start">
-        <Link :to="localePath('/')" aria-label="homeLink">
-          <Logo :settings="settings" class="h-8 md:h-9" />
-        </Link>
-      </div>
-
-      <nav class="items-center hidden h-full lg:flex gap-4">
-        <NuxtLink v-for="(link, index) in links" :key="index" :to="link.to" class="font-medium px-2 py-1" :class="{ 'text-primary' : isActive(link) }">
-          {{ link.title }}
-        </NuxtLink>
-      </nav>
-
-      <div class="flex items-center justify-end gap-1 lg:flex-1">
-        <GitHubButton />
-        <TwitterButton class="hidden lg:block" />
-        <ColorSwitcher class="hidden lg:block" padding="p-3" />
-        <AlgoliaSearchBox v-if="settings && settings.algolia" :options="settings.algolia" :settings="settings" />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import { defineComponent, useContext, useRoute, computed } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup () {
-    const { $docus } = useContext()
-    const route = useRoute()
-    const currentSlug = computed(() => {
-      return route.value.path !== '/' && route.value.params?.pathMatch
-        ? route.value.params.pathMatch.split('/')[0]
-        : null
-    })
-    const settings = computed(() => $docus.settings.value)
-
-    function isActive (link) {
-      return `/${currentSlug.value}` === link.to
-    }
-
-    return {
-      settings,
-      isActive
-    }
-  }
-})
-</script>
--- a/docs/components/app/AppLayout.vue
+++ b/docs/components/app/AppLayout.vue
@ -1,44 +0,0 @@
-<template>
-  <div class="relative w-full">
-    <AppHeader :links="headerLinks" />
-
-    <div class="lg:flex" :class="containerClass">
-      <slot v-if="['xs', 'sm', 'md'].includes($mq) || layout.aside" name="aside">
-        <AppAside :links="headerLinks" :class="layout.asideClass" />
-      </slot>
-
-      <div class="flex-auto w-full min-w-0 lg:static lg:max-h-full lg:overflow-visible">
-        <slot />
-      </div>
-    </div>
-    <AppFooter />
-  </div>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  data () {
-    return {
-      headerLinks: []
-    }
-  },
-  async fetch () {
-    const { $docus } = this
-    this.headerLinks = (await $docus
-      .search('/collections/header')
-      .fetch()).links
-  },
-  computed: {
-    layout () {
-      return this.$docus.layout.value
-    },
-    containerClass () {
-      if (this.layout.aside && this.layout.fluid) { return 'd-container-fluid' }
-      if (this.layout.aside) { return 'd-container' }
-      return ''
-    }
-  }
-})
-</script>
--- a/docs/components/app/AsideHeaderNavigation.vue
+++ b/docs/components/app/AsideHeaderNavigation.vue
@ -1,71 +0,0 @@
-<template>
-  <nav ref="nav" class="flex flex-col gap-1 py-4 px-4 sm:px-6">
-    <NuxtLink v-for="(link, index) in links" :key="index" :to="link.to" class="font-medium my-1 py-1" :class="{ 'text-primary' : isActive(link) }">
-      {{ link.title }}
-    </NuxtLink>
-  </nav>
-</template>
-
-<script>
-import { defineComponent, useContext, useRoute, ref, watch, computed } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup (props) {
-    const { $menu } = useContext()
-    const route = useRoute()
-    const currentSlug = computed(() => {
-      return route.value.path !== '/' && route.value.params?.pathMatch
-        ? route.value.params.pathMatch.split('/')[0]
-        : null
-    })
-    const nav = ref(null)
-    const openedLink = ref(null)
-
-    function selectActiveLink () {
-      if (currentSlug.value) {
-        for (const [index, link] of props.links.entries()) {
-          if (link.slug === currentSlug.value || link.items?.some(item => item.slug === currentSlug.value)) {
-            openedLink.value = index
-            break
-          }
-        }
-      } else {
-        openedLink.value = null
-      }
-    }
-
-    selectActiveLink()
-
-    watch($menu.visible, (value) => {
-      if (value) {
-        selectActiveLink()
-      }
-    })
-
-    function toggle (index) {
-      if (openedLink.value === index) {
-        openedLink.value = null
-      } else {
-        openedLink.value = index
-      }
-    }
-
-    function isActive (link) {
-      return `/${currentSlug.value}` === link.to
-    }
-
-    return {
-      openedLink,
-      toggle,
-      nav,
-      isActive
-    }
-  }
-})
-</script>
--- a/docs/components/app/AsideNavigation.vue
+++ b/docs/components/app/AsideNavigation.vue
@ -1,101 +0,0 @@
-<template>
-  <nav
-    class="
-      flex flex-col
-      justify-start
-      max-w-sm
-      overflow-y-auto
-      text-sm
-      font-medium
-      lg:h-[reset]
-      h-(full-header)
-      d-scrollbar
-      py-4
-      px-4
-      sm:px-6
-      lg:pr-0 lg:pt-8
-    "
-  >
-    <!-- Title -->
-    <h5 v-if="['xs', 'sm', 'md'].includes($mq) && title" class="m-0 py-2 font-medium text-base uppercase">
-      {{ title }}
-    </h5>
-
-    <!-- Links list -->
-    <ul>
-      <template v-for="link in links">
-        <AsideNavigationItem
-          v-if="link.nested !== false && link.children.length"
-          :key="link.to"
-          :title="link.title"
-          :docs="link.children"
-          :collapse="link.collapse"
-          @update:collapse="link.collapse = $event"
-        />
-        <AsideNavigationItem v-else :key="link.to" :docs="[link]" />
-      </template>
-    </ul>
-
-    <AsideBottom />
-  </nav>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref, watch, useContext } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  setup () {
-    const { $docus } = useContext()
-
-    // Replicate currentNav locally
-    const links = ref($docus.currentNav.value.links)
-
-    // Category title
-    const title = ref($docus.currentNav.value.title)
-
-    // Category slug
-    const slug = ref($docus.currentNav.value.slug)
-
-    // Check if current current navigation has directories
-    const isDirectory = computed(
-      () => links.value.filter(link => link.children && link.children.length > 0).length === 0
-    )
-
-    // Watch updates on currentNav
-    watch(
-      $docus.currentNav,
-      (newVal) => {
-        links.value = newVal.links
-        title.value = newVal.title
-        slug.value = newVal.slug
-      },
-      { deep: true }
-    )
-
-    // Uncollapse current category on first navigation
-    watch(
-      links,
-      (newVal) => {
-        newVal.forEach((link) => {
-          if (link.children && link.children.length > 0) {
-            const isCategoryActive = link.children.some(document => $docus.isLinkActive(document.to))
-
-            if (isCategoryActive) {
-              link.collapse = false
-            }
-          }
-        })
-      },
-      { immediate: true }
-    )
-
-    // Get parent
-    const parent = computed(() => $docus.currentNav.value.parent)
-
-    // Get last release value
-    const lastRelease = computed(() => $docus.lastRelease?.value)
-
-    return { isDirectory, links, title, slug, parent, lastRelease }
-  }
-})
-</script>
--- a/docs/components/atoms/Alert.vue
+++ b/docs/components/atoms/Alert.vue
@ -1,121 +0,0 @@
-<template>
-  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
-    <div class="flex items-start">
-      <InjectComponent
-        v-if="icon"
-        :component="icon"
-        class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
-      >
-        {{ icon }}
-      </InjectComponent>
-      <div class="flex-grow alert-content">
-        <Markdown unwrap="p">
-          <template #between>
-            <br>
-          </template>
-        </Markdown>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      default: 'info',
-      validator (value) {
-        return ['info', 'success', 'warning', 'danger'].includes(value)
-      }
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-.alert {
-  &.success {
-    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
-    >>> {
-      code {
-        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
-      }
-      a:hover {
-        code {
-          @apply border-green-400 dark:border-green-700;
-        }
-      }
-    }
-  }
-  &.info {
-    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
-    >>> {
-      code {
-        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
-      }
-      a:hover {
-        code {
-          @apply border-blue-400 dark:border-blue-700;
-        }
-      }
-    }
-  }
-  &.warning {
-    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
-    >>> {
-      code {
-        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
-      }
-      a:hover {
-        code {
-          @apply border-yellow-400 dark:border-yellow-700;
-        }
-      }
-    }
-  }
-  &.danger {
-    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
-    >>> {
-      code {
-        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
-      }
-      a:hover {
-        code {
-          @apply border-red-400 dark:border-red-700;
-        }
-      }
-    }
-  }
-
-  >>> {
-    strong {
-      @apply font-semibold text-current;
-    }
-    a {
-      @apply underline border-none font-semibold text-current;
-      code {
-        @apply border border-transparent border-dashed;
-      }
-    }
-  }
-}
-
-.alert >>> p {
-  @apply m-0 !important;
-}
-
-.dark .alert {
-  >>> {
-    a {
-      @apply text-current;
-    }
-  }
-}
-</style>
--- a/docs/components/atoms/ButtonLink.vue
+++ b/docs/components/atoms/ButtonLink.vue
@ -1,45 +0,0 @@
-<template>
-  <Link class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href" :blank="blank">
-    <Markdown unwrap="p ul li" />
-    <template #href>
-      <IconExternalLink v-if="blank" class="w-4 h-4 ml-2" />
-    </template>
-  </Link>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    href: {
-      type: String,
-      default: ''
-    },
-    blank: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: ''
-    },
-    bold: {
-      type: Boolean,
-      default: false
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-a.button-link {
-  @apply inline-flex items-center flex-none rounded-md mb-2 sm:mb-0 px-3 py-1.5 text-xs leading-4 text-black transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-400  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
-  &.medium {
-    @apply px-4 py-2.5 text-sm leading-4;
-  }
-  &.large {
-    @apply px-6 py-2.5 text-lg leading-6;
-  }
-}
-</style>
--- a/docs/components/atoms/EditOnGithub.vue
+++ b/docs/components/atoms/EditOnGithub.vue
@ -1,74 +0,0 @@
-<template>
-  <div v-if="link" class="flex flex-col justify-between d-secondary-text mt-8 mb-4 px-4 sm:px-6 sm:flex-row">
-    <a :href="link" target="_blank" rel="noopener" class="flex items-center mb-2 text-sm sm:mb-0 hover:underline">
-      <IconEdit class="w-3 h-3 mr-1" />
-      <span>
-        {{ $t('article.github') }}
-      </span>
-    </a>
-
-    <span v-if="page.mtime" class="flex items-center text-sm">
-      {{ $t('article.updatedAt') }} {{ $d(Date.parse(page.mtime), 'long') }}
-    </span>
-  </div>
-</template>
-
-<script>
-// TODO: remove this file when Docus fixed the issue
-// wrong generated link due to folders deepness
-
-import { defineComponent, computed } from '@nuxtjs/composition-api'
-import { joinURL } from 'ufo'
-import { useSettings } from '../../node_modules/@docus/theme/dist/composables/settings'
-
-export default defineComponent({
-  props: {
-    page: {
-      type: Object,
-      required: true
-    }
-  },
-  setup (props) {
-    const { settings } = useSettings()
-
-    /**
-     * Repository URL computed
-     */
-    const repoUrl = computed(() => joinURL(settings.value.github.url, settings.value.github.repo))
-
-    /**
-     * Get a page link computed from a page object.
-     */
-    const getPageLink = (page) => {
-      const link = computed(() => {
-        if (!settings.value.github) { return }
-
-        // TODO: Fix source; regression from split
-        const key = page.key.split(':')
-        const dir = key.slice(1, key.length - 1).filter(Boolean).join('/')
-        const source = key[key.length - 1]
-
-        return [
-          repoUrl.value,
-          'edit',
-          settings.value.github.branch,
-          settings.value.github.dir || '',
-          settings.value.contentDir,
-          dir,
-          `${source}`.replace(/^\//g, '')
-        ]
-          .filter(Boolean)
-          .join('/')
-      })
-
-      return link
-    }
-
-    const link = getPageLink(props.page)
-
-    return {
-      link
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/Gem.vue
+++ b/docs/components/atoms/Gem.vue
@ -1,134 +0,0 @@
-<template>
-  <canvas class="webgl" :style="{ opacity: ready ? 1 : 0 }" />
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      ready: false
-    }
-  },
-  async mounted () {
-    const THREE = await import('three').then(m => m.default || m)
-    const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js' /* webpackChunkName: "gem" */).then(m => m.default || m)
-    const { GLTFLoader } = await import('three/examples/jsm/loaders/GLTFLoader.js' /* webpackChunkName: "gem" */).then(m => m.default || m)
-    // Canvas
-    const canvas = document.querySelector('canvas.webgl')
-
-    // Scene
-    const scene = new THREE.Scene()
-
-    // Models
-    let gem
-    let light
-
-    const gltfLoader = new GLTFLoader()
-    gltfLoader.load(
-      '/3D/gem.gltf',
-      (gltf) => {
-        // Gem
-        gem = gltf.scene.children[6]
-
-        // Material setup
-        const textureLoader = new THREE.TextureLoader()
-        const roughnessTexture = textureLoader.load('/3D/roughness.jpeg')
-        gem.material.roughnessMap = roughnessTexture
-        gem.material.displacementScale = 0.15
-        gem.material.emissiveIntensity = 0.4
-        gem.material.refractionRatio = 1
-        gem.rotation.z = 0
-        scene.add(gem)
-
-        light = gltf.scene.children[0]
-        scene.add(light)
-        this.ready = true
-      }
-    )
-
-    // Lights
-    const ambientLight = new THREE.AmbientLight(0xFFFFFF, 2)
-    scene.add(ambientLight)
-
-    const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 3)
-    directionalLight.position.set(1, 1, 1)
-    scene.add(directionalLight)
-
-    const directionalLight2 = new THREE.DirectionalLight(0xFFFFFF, 3)
-    directionalLight2.position.set(-1, -1, -1)
-    scene.add(directionalLight2)
-
-    // Settings
-    const sizes = {
-      width: 200,
-      height: 200
-    }
-
-    // Base camera
-    const camera = new THREE.PerspectiveCamera(
-      75,
-      sizes.width / sizes.height,
-      0.1,
-      100
-    )
-    camera.position.set(2, 2, 6)
-    scene.add(camera)
-
-    // Controls
-    const controls = new OrbitControls(camera, canvas)
-    controls.enableZoom = false
-    controls.target.set(0, 0.75, 0)
-    controls.enableDamping = true
-    controls.enablePan = false
-    // Lock Y Axis
-    controls.minPolarAngle = Math.PI / 2
-    controls.maxPolarAngle = Math.PI / 2
-
-    // Render
-    const renderer = new THREE.WebGLRenderer({
-      antialiasing: true,
-      canvas,
-      alpha: true
-    })
-    renderer.setClearColor(0x000000, 0)
-    renderer.shadowMap.enabled = true
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap
-    renderer.setSize(sizes.width, sizes.height)
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-
-    // Animations
-    const clock = new THREE.Clock()
-    let previousTime = 0
-
-    const tick = () => {
-      const elapsedTime = clock.getElapsedTime()
-      const _deltaTime = elapsedTime - previousTime
-      previousTime = elapsedTime
-      if (gem) {
-        gem.rotation.y = 1.1 * elapsedTime
-      }
-
-      // Update controls
-      controls.update()
-
-      // Render
-      renderer.render(scene, camera)
-
-      // Call tick again on the next frame
-      window.requestAnimationFrame(tick)
-    }
-
-    tick()
-  }
-}
-</script>
-
-<style scoped>
-.webgl {
-  outline: none;
-  width: 200px;
-  height: 200px;
-  opacity: 0;
-  transition: opacity 1s ease;
-}
-</style>
--- a/docs/components/atoms/GitHubButton.vue
+++ b/docs/components/atoms/GitHubButton.vue
@ -1,5 +0,0 @@
-<template>
-  <Link to="https://github.com/nuxt/framework" aria-label="gitHubLink" blank class="d-icon p-3">
-    <IconGitHub class="w-6 h-6" />
-  </Link>
-</template>
--- a/docs/components/atoms/Headline.vue
+++ b/docs/components/atoms/Headline.vue
@ -1,5 +0,0 @@
-<template>
-  <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 my-4">
-    <slot />
-  </h1>
-</template>
--- a/docs/components/atoms/LinkExample.vue
+++ b/docs/components/atoms/LinkExample.vue
@ -1,28 +0,0 @@
-<template>
-  <Alert type="info" icon="🔎">
-    Read and edit a live example in <NuxtLink :to="link" v-text="computedTitle" />.
-  </Alert>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-import createTitle from '~/utils/createTitle'
-
-export default defineComponent({
-  props: {
-    link: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    computedTitle () {
-      return createTitle(this.title, this.link)
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/Logo.vue
+++ b/docs/components/atoms/Logo.vue
@ -1,26 +0,0 @@
-<template>
-  <div class="inline-flex items-center space-x-3">
-    <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8" @click="home">
-      <g clip-path="url(#a)">
-        <path fill="currentColor" d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z" />
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z" fill="#80EEC0" />
-        <path d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z" fill="#00DC82" />
-      </g>
-      <defs><clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z" /></clipPath></defs>
-    </svg>
-    <span class="inline-flex items-center mt-1.2 px-2 py-0.5 rounded text-xs font-medium font-mono bg-cloud-surface dark:bg-sky-dark dark:text-white">RC</span>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    home () {
-      if (this.$route.path === '/') {
-        // scroll to top
-        window.scrollTo(0, 0)
-      }
-    }
-  }
-}
-</script>
--- a/docs/components/atoms/NeedContribution.vue
+++ b/docs/components/atoms/NeedContribution.vue
@ -1,11 +0,0 @@
-<template>
-  <Alert type="warning" icon="🚧">
-    Documentation for this section is not yet complete. You can
-    <NuxtLink to="/community/contribution#documentation-guide">
-      contribute to the documentation.
-    </NuxtLink>
-  </Alert>
-</template>
-
-<script>
-</script>
--- a/docs/components/atoms/NuxtContainer.vue
+++ b/docs/components/atoms/NuxtContainer.vue
@ -1,18 +0,0 @@
-<template>
-  <Component :is="tag" class="relative w-full d-container-content">
-    <slot />
-  </Component>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    tag: {
-      type: String,
-      default: 'div'
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/ReadMore.vue
+++ b/docs/components/atoms/ReadMore.vue
@ -1,29 +0,0 @@
-<template>
-  <Alert icon="👉">
-    Read more in <Link :to="link" v-text="computedTitle" />.
-  </Alert>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-import createTitle from '~/utils/createTitle'
-
-export default defineComponent({
-  props: {
-    link: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    computedTitle () {
-      // Guess title from link!
-      return createTitle(this.title, this.link)
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/Sandbox.vue
+++ b/docs/components/atoms/Sandbox.vue
@ -1,107 +0,0 @@
-<template>
-  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-md sandbox mt-4">
-    <TabsHeader
-      v-if="!src"
-      ref="tabs"
-      :active-tab-index="activeTabIndex"
-      :tabs="providersTabs"
-      @update="updateTab"
-    >
-      <div slot="footer" class="absolute top-1/2 transform -translate-y-1/2 right-0 px-2">
-        <Link class="flex items-center text-gray-500 dark:text-gray-400" :to="sandBoxUrl" blank>
-          <IconExternalLink class="h-5 w-5" />
-        </Link>
-      </div>
-    </TabsHeader>
-
-    <iframe
-      v-if="url"
-      :src="url"
-      title="Sandbox editor"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-      class="w-full h-full min-h-[700px] overflow-hidden bg-gray-100 dark:bg-gray-800"
-    />
-    <span v-else class="text-white flex-1">Loading Sandbox...</span>
-  </div>
-</template>
-
-<script>
-import {
-  defineComponent,
-  onMounted,
-  computed,
-  ref,
-  useContext
-} from '@nuxtjs/composition-api'
-export default defineComponent({
-  props: {
-    src: {
-      type: String
-    },
-    repo: {
-      type: String
-    },
-    branch: {
-      type: String
-    },
-    dir: {
-      type: String
-    },
-    file: {
-      type: String,
-      default: 'app.vue'
-    }
-  },
-  setup (props) {
-    const { $colorMode } = useContext()
-    const providers = {
-      CodeSandBox: () =>
-        `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${$colorMode.value}`,
-      StackBlitz: () =>
-        `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${$colorMode.value}`
-    }
-    const providersTabs = Object.keys(providers).map(p => ({ label: p }))
-    const activeTabIndex = ref(-1)
-    const tabs = ref()
-    const url = ref('')
-    const provider = ref('')
-    function updateTab (i) {
-      activeTabIndex.value = i
-      changeProvider(providersTabs[i].label)
-    }
-    onMounted(() => {
-      // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
-      provider.value =
-        window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
-      url.value = props.src || providers[provider.value]()
-      // Set active tab
-      activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
-      setTimeout(() => tabs.value.updateTabs(activeTabIndex.value), 100)
-    })
-    const changeProvider = (value) => {
-      provider.value = value
-      url.value = props.src || providers[provider.value]()
-      localStorage.setItem('docus_sandbox', value)
-    }
-    const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
-    return {
-      tabs,
-      provider,
-      url,
-      sandBoxUrl,
-      changeProvider,
-      updateTab,
-      activeTabIndex,
-      providersTabs
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-.sandbox,
-.sandbox iframe {
-  @apply w-full rounded-md rounded-tl-none rounded-tr-none overflow-hidden h-64;
-  height: 700px;
-}
-</style>
--- a/docs/components/atoms/SectionButton.vue
+++ b/docs/components/atoms/SectionButton.vue
@ -1,84 +0,0 @@
-<template>
-  <!-- eslint-disable-next-line vue/require-component-is -->
-  <component
-    v-bind="linkProps"
-    :aria-label="ariaLabel"
-    class="font-medium rounded-md"
-    :class="[
-      iconLeft || iconRight ? 'inline-flex items-center px-4 py-2.5' : 'px-4 py-2.5',
-      { 'text-md 2xl:text-base ': size === 'lg' },
-      { 'text-sm 2xl:text-md ': size === 'md' },
-      { 'text-xs 2xl:text-sm ': size === 'sm' }
-    ]"
-  >
-    <div v-if="iconLeft" class="h-full flex items-center justify-center">
-      <Component :is="iconLeft" class="mr-2" :class="{ 'w-5 h-5': size === 'lg' }" />
-    </div>
-    <slot />
-    <div v-if="iconRight" class="h-full flex items-center justify-center">
-      <Component :is="iconRight" class="ml-2" :class="{ 'w-5 h-5': size === 'lg' }" />
-    </div>
-  </component>
-</template>
-
-<script>
-import { defineComponent, computed } from '@nuxtjs/composition-api'
-export default defineComponent({
-  props: {
-    to: {
-      type: String,
-      default: ''
-    },
-    href: {
-      type: String,
-      default: ''
-    },
-    size: {
-      type: String,
-      default: 'lg',
-      validator (value) {
-        return ['sm', 'md', 'lg'].includes(value)
-      }
-    },
-    iconLeft: {
-      type: String,
-      default: null
-    },
-    iconRight: {
-      type: String,
-      default: null
-    },
-    ariaLabel: {
-      type: String,
-      default: null
-    }
-  },
-  setup (props) {
-    const linkProps = computed(() => {
-      const { to, href } = props
-      if (to?.length) {
-        return {
-          is: 'Link',
-          to
-        }
-      } else if (href?.length) {
-        return {
-          is: 'Link',
-          static: true,
-          to: '',
-          href,
-          blank: true
-        }
-      } else {
-        return {
-          is: 'button'
-        }
-      }
-    })
-
-    return {
-      linkProps
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/StabilityEdge.vue
+++ b/docs/components/atoms/StabilityEdge.vue
@ -1,22 +0,0 @@
-<template>
-  <Alert icon="🧪">
-    {{ title }} is available on edge channel. Check out the
-    <Link to="/guide/going-further/edge-channel">
-      Edge Channel Documentation
-    </Link> to beta test.
-    <slot />
-  </Alert>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    title: {
-      type: String,
-      default: 'This feature'
-    }
-  }
-})
-</script>
--- a/docs/components/atoms/Star.vue
+++ b/docs/components/atoms/Star.vue
@ -1,45 +0,0 @@
-<template>
-  <div ref="star" class="absolute bg-primary-300 dark:bg-white rounded-full opacity-100 star" :style="style" />
-</template>
-
-<script>
-import { defineComponent, ref, computed, onMounted } from '@nuxtjs/composition-api'
-export default defineComponent({
-  setup () {
-    const style = ref({})
-    const randomY = ref(null)
-    const randomX = ref(null)
-    const randomRadius = computed(() => Math.round(Math.random() * Math.round(4)))
-    const randomDuration = computed(() => Math.round(Math.random() * Math.round(10)))
-
-    onMounted(() => {
-      randomX.value = Math.random() * Math.floor(document.documentElement.clientWidth)
-      randomY.value = Math.random() * Math.floor(document.documentElement.clientHeight)
-      style.value = {
-        top: randomY.value + 'px',
-        left: randomX.value + 'px',
-        height: randomRadius.value + 'px',
-        width: randomRadius.value + 'px',
-        animationDuration: randomDuration.value + 's'
-      }
-    })
-
-    return {
-      style,
-      randomRadius,
-      randomDuration,
-      randomY,
-      randomX
-    }
-  }
-})
-</script>
-<style lang="postcss" scoped>
-/* Stars */
-.star {
-  animation-name: fade;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-</style>
--- a/docs/components/atoms/TwitterButton.vue
+++ b/docs/components/atoms/TwitterButton.vue
@ -1,5 +0,0 @@
-<template>
-  <Link to="https://twitter.com/nuxt_js" aria-label="twitterLink" blank class="d-icon p-3">
-    <IconTwitter class="w-6 h-6" />
-  </Link>
-</template>
--- a/docs/components/atoms/icons/IconArrowRight.vue
+++ b/docs/components/atoms/icons/IconArrowRight.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconCAPI.vue
+++ b/docs/components/atoms/icons/IconCAPI.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="28" height="25" viewBox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9467 22.3333C10 25.0933 6.20001 25.7867 3.45334 23.8667C0.720008 21.9467 0.0800078 18.12 2.00001 15.3333C2.53695 14.5538 3.24758 13.9096 4.0759 13.4514C4.90423 12.9933 5.82763 12.7338 6.77334 12.6933L6.84001 14.6C5.62667 14.6933 4.45334 15.32 3.69334 16.4133C2.36001 18.3333 2.77334 20.92 4.60001 22.2133C6.44001 23.4933 9.01334 23 10.3467 21.0933C10.76 20.4933 11 19.84 11.0933 19.1733V17.8267L18.5333 17.7733L18.6267 17.6267C19.3333 16.4 20.8667 15.9733 22.0667 16.6667C22.3539 16.8347 22.6052 17.0577 22.8062 17.3229C23.0072 17.5881 23.154 17.8903 23.2381 18.2122C23.3223 18.5341 23.3423 18.8695 23.2969 19.1991C23.2514 19.5287 23.1415 19.8462 22.9733 20.1333C22.2667 21.3467 20.72 21.7733 19.52 21.08C18.9733 20.7733 18.5867 20.28 18.4133 19.72L12.9867 19.7467C12.8277 20.673 12.4732 21.5548 11.9467 22.3333V22.3333ZM21.6533 12.8133C25.0267 13.2267 27.4267 16.2533 27.0133 19.5733C26.6 22.9067 23.5333 25.2667 20.16 24.8533C19.2232 24.7442 18.3239 24.4219 17.5312 23.9111C16.7384 23.4003 16.0732 22.7146 15.5867 21.9067L17.24 20.9467C17.582 21.4763 18.0365 21.9241 18.5711 22.2582C19.1058 22.5923 19.7074 22.8046 20.3333 22.88C22.6667 23.16 24.7333 21.5733 25.0133 19.3467C25.2933 17.12 23.64 15.08 21.3333 14.8C20.6133 14.72 19.92 14.8133 19.2933 15.04L18.16 15.6267L14.72 9.26667H14.4267C13.7554 9.24713 13.1192 8.96269 12.657 8.47552C12.1948 7.98834 11.9442 7.33803 11.96 6.66667C12 5.28001 13.2 4.20001 14.6 4.25334C16 4.33334 17.1067 5.46667 17.0667 6.85334C17.04 7.44001 16.8133 7.97334 16.4533 8.38667L18.9867 13.0667C19.8133 12.8 20.72 12.7067 21.6533 12.8133V12.8133ZM9.00001 9.18667C7.66667 6.05334 9.08001 2.46667 12.16 1.16001C15.2533 -0.14666 18.8267 1.33334 20.16 4.46667C20.9467 6.29334 20.7867 8.29334 19.8933 9.89334L18.24 8.93334C18.8 7.85334 18.8933 6.53334 18.36 5.29334C17.4533 3.16001 15.04 2.13334 12.9733 3.00001C10.8933 3.88001 9.96001 6.33334 10.8667 8.46667C11.24 9.34667 11.8667 10.0267 12.6267 10.48L13.1467 10.76L9.05334 17.4133C9.09334 17.48 9.14668 17.56 9.18668 17.6667C9.84001 18.88 9.38667 20.4133 8.16001 21.0667C6.94667 21.72 5.41334 21.24 4.74667 19.9867C4.09334 18.7467 4.54667 17.2133 5.77334 16.56C6.29334 16.28 6.86667 16.2133 7.41334 16.3333L10.4933 11.3067C9.86667 10.7333 9.33334 10.0133 9.00001 9.18667V9.18667Z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconCLI.vue
+++ b/docs/components/atoms/icons/IconCLI.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--bx"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  ><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM6.414 15.707L5 14.293L7.293 12L5 9.707l1.414-1.414L10.121 12l-3.707 3.707zM19 16h-7v-2h7v2z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconClose.vue
+++ b/docs/components/atoms/icons/IconClose.vue
@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-  </svg>
-</template>
--- a/docs/components/atoms/icons/IconCloud.vue
+++ b/docs/components/atoms/icons/IconCloud.vue
@ -1,10 +0,0 @@
-<template>
-  <svg enable-background="new 0 0 60 60" version="1.1" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-    <path d="m50.003 21.5c-0.115-8.699-7.193-16-15.919-16-5.559 0-10.779 3.005-13.661 7.336-1.267-0.843-2.787-1.336-4.423-1.336-4.418 0-8 3.582-8 8 0 0.153 0.014 0.302 0.023 0.454-0.01 0.182-0.023 0.366-0.023 0.546-3.988 1.912-7 6.457-7 11.155 0 6.515 5.33 11.845 11.845 11.845h24.507c0.138 0 0.272-0.016 0.408-0.021 0.137 5e-3 0.271 0.021 0.408 0.021h9.803c6.066 0 11.029-4.963 11.029-11.028 0-5.371-3.894-10.011-8.997-10.972z" fill="#91BAE1" />
-    <path d="m47.972 44.5h-9.803c-0.105 0-0.208-6e-3 -0.311-0.014l-0.134-8e-3 -0.063 8e-3c-0.103 8e-3 -0.206 0.014-0.31 0.014h-24.506c-7.083 0-12.845-5.763-12.845-12.846 0-4.755 2.857-9.506 7.016-11.773-9e-3 -0.126-0.016-0.252-0.016-0.381 0-4.963 4.038-9 9-9 1.451 0 2.864 0.347 4.138 1.008 3.258-4.345 8.517-7.008 13.946-7.008 8.944 0 16.363 7.194 16.891 16.194 5.198 1.366 9.025 6.289 9.025 11.778 0 6.632-5.396 12.028-12.028 12.028zm-10.247-2.02 0.27 0.011c0.058 4e-3 0.115 9e-3 0.174 9e-3h9.803c5.529 0 10.028-4.499 10.028-10.028 0-4.816-3.518-9.11-8.182-9.989l-0.804-0.151-0.011-0.817c-0.108-8.28-6.801-15.015-14.919-15.015-5.007 0-10.042 2.704-12.828 6.89l-0.554 0.832-0.833-0.553c-1.149-0.765-2.487-1.169-3.869-1.169-3.86 0-7 3.141-7 7 0 0.086 6e-3 0.171 0.012 0.255l0.012 0.197-9e-3 0.162c-7e-3 0.13-0.015 0.259-0.015 0.386v0.63l-0.568 0.271c-3.727 1.787-6.432 6.099-6.432 10.253 0 5.981 4.865 10.846 10.845 10.846h24.507c0.059 0 0.116-5e-3 0.174-9e-3l0.199-0.011z" fill="#8697CB" />
-    <path d="m50.003 21.5s-2.535-0.375-5.003 0" fill="#91BAE1" />
-    <path d="m44.999 22.5c-0.486 0-0.912-0.354-0.987-0.85-0.083-0.546 0.292-1.056 0.838-1.139 2.587-0.394 5.19-0.018 5.3-1e-3 0.546 0.081 0.923 0.589 0.842 1.135-0.08 0.547-0.594 0.919-1.134 0.844-0.024-3e-3 -2.425-0.345-4.708-1e-3 -0.051 8e-3 -0.101 0.012-0.151 0.012z" fill="#8697CB" />
-    <path d="m8 19.5c0-4.418 3.582-8 8-8s8 3.582 8 8" fill="#91BAE1" />
-    <path d="m24 20.5c-0.552 0-1-0.447-1-1 0-3.859-3.14-7-7-7s-7 3.141-7 7c0 0.553-0.448 1-1 1s-1-0.447-1-1c0-4.963 4.038-9 9-9s9 4.037 9 9c0 0.553-0.448 1-1 1z" fill="#8697CB" />
-  </svg>
-</template>
--- a/docs/components/atoms/icons/IconCode.vue
+++ b/docs/components/atoms/icons/IconCode.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconDevtools.vue
+++ b/docs/components/atoms/icons/IconDevtools.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--bx"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  ><path d="M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z" fill="currentColor" /><path d="M9.293 9.293L5.586 13l3.707 3.707l1.414-1.414L8.414 13l2.293-2.293zm5.414 0l-1.414 1.414L15.586 13l-2.293 2.293l1.414 1.414L18.414 13z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconDirectory.vue
+++ b/docs/components/atoms/icons/IconDirectory.vue
@ -1,4 +0,0 @@
-
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 36 36"><path class="clr-i-outline clr-i-outline-path-1" d="M30 9H16.42l-2.31-3.18A2 2 0 0 0 12.49 5H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2zm0 20H6V13h7.31a2 2 0 0 0 2-2H6V7h6.49l2.61 3.59a1 1 0 0 0 .81.41H30z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconFeather.vue
+++ b/docs/components/atoms/icons/IconFeather.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--entypo"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 20 20"
-  ><path d="M4.254 19.567c.307-.982.77-2.364 1.391-4.362c2.707-.429 3.827.341 5.546-2.729c-1.395.427-3.077-.792-2.987-1.321c.091-.528 3.913.381 6.416-3.173c-3.155.696-4.164-.836-3.757-1.067c.939-.534 3.726-.222 5.212-1.669c.766-.745 1.125-2.556.813-3.202c-.374-.781-2.656-1.946-3.914-1.836c-1.258.109-3.231 4.79-3.817 4.754c-.584-.037-.703-2.098.319-4.013c-1.077.477-3.051 1.959-3.67 3.226c-1.153 2.357.108 7.766-.296 7.958c-.405.193-1.766-2.481-2.172-3.694c-.555 1.859-.568 3.721 1.053 6.194c-.611 1.623-.945 3.491-.996 4.441c-.024.759.724.922.859.493z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconFile.vue
+++ b/docs/components/atoms/icons/IconFile.vue
@ -1,4 +0,0 @@
-
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 36 36"><path class="clr-i-outline clr-i-outline-path-1" d="M21.89 4H7.83A1.88 1.88 0 0 0 6 5.91v24.18A1.88 1.88 0 0 0 7.83 32h20.34A1.88 1.88 0 0 0 30 30.09V11.92zm-.3 2.49l6 5.9h-6zM8 30V6h12v8h8v16z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconFileSettings.vue
+++ b/docs/components/atoms/icons/IconFileSettings.vue
@ -1,4 +0,0 @@
-
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 36 36"><path d="M33.83 23.43a1.16 1.16 0 0 0-.71-1.12l-1.68-.5c-.09-.24-.18-.48-.29-.71l.78-1.44a1.16 1.16 0 0 0-.21-1.37l-1.42-1.41a1.16 1.16 0 0 0-1.37-.2l-1.45.76a7.84 7.84 0 0 0-.76-.32l-.48-1.58a1.15 1.15 0 0 0-1.11-.77h-2a1.16 1.16 0 0 0-1.11.82l-.47 1.54a7.76 7.76 0 0 0-.77.32l-1.42-.76a1.16 1.16 0 0 0-1.36.2l-1.45 1.4a1.16 1.16 0 0 0-.21 1.38l.74 1.33a7.64 7.64 0 0 0-.31.74l-1.58.47a1.15 1.15 0 0 0-.83 1.11v2a1.15 1.15 0 0 0 .83 1.1l1.59.47a7.53 7.53 0 0 0 .31.72l-.78 1.46a1.16 1.16 0 0 0 .21 1.37l1.42 1.4a1.16 1.16 0 0 0 1.37.21l1.48-.78c.23.11.47.2.72.29l.49 1.62a1.16 1.16 0 0 0 1.11.81h2a1.16 1.16 0 0 0 1.11-.82l.47-1.58c.24-.08.47-.18.7-.29l1.5.79a1.16 1.16 0 0 0 1.36-.2l1.42-1.4a1.16 1.16 0 0 0 .21-1.38l-.79-1.45q.16-.34.29-.69L33 26.5a1.15 1.15 0 0 0 .83-1.11zm-1.6 1.63l-2.11.62l-.12.42a6 6 0 0 1-.5 1.19l-.21.38l1 1.91l-1 1l-2-1l-.37.2a6.21 6.21 0 0 1-1.2.49l-.42.12l-.63 2.09h-1.25l-.63-2.08l-.42-.12a6.23 6.23 0 0 1-1.21-.49l-.37-.2l-1.94 1l-1-1l1-1.94l-.22-.38a6 6 0 0 1-.46-1.27l-.17-.37l-2-.63v-1.31l2-.61l.13-.41a5.94 5.94 0 0 1 .53-1.23l.24-.44l-1-1.85l1-.94l1.89 1l.38-.21a6.23 6.23 0 0 1 1.26-.52l.41-.12l.63-2h1.38l.62 2l.41.12a6.21 6.21 0 0 1 1.22.52l.38.21l1.92-1l1 1l-1 1.89l.21.38a6.08 6.08 0 0 1 .5 1.21l.12.42l2.06.61z" class="clr-i-outline clr-i-outline-path-1" fill="currentColor" /><path d="M24.12 20.35a4 4 0 1 0 4.08 4a4.06 4.06 0 0 0-4.08-4zm0 6.46a2.43 2.43 0 1 1 2.48-2.43a2.46 2.46 0 0 1-2.48 2.44z" class="clr-i-outline clr-i-outline-path-2" fill="currentColor" /><path d="M14.49 31H6V5h20v7.89a3.2 3.2 0 0 1 2 1.72V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v26a2 2 0 0 0 2 2h10.23l-1.1-1.08a3.11 3.11 0 0 1-.64-.92z" class="clr-i-outline clr-i-outline-path-3" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconGit.vue
+++ b/docs/components/atoms/icons/IconGit.vue
@ -1,4 +0,0 @@
-
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconGitHub.vue
+++ b/docs/components/atoms/icons/IconGitHub.vue
@ -1,10 +0,0 @@
-<template>
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.02751 0.333496C3.34571 0.333496 0.333332 3.40836 0.333332 7.16653C0.333332 10.1845 2.23002 12.7468 4.90769 13.6579C5.2424 13.7149 5.35397 13.4871 5.35397 13.3163C5.35397 13.1454 5.35397 12.7468 5.35397 12.1774C3.51307 12.576 3.12257 11.2664 3.12257 11.2664C2.84365 10.4692 2.39737 10.2414 2.39737 10.2414C1.72795 9.8428 2.39737 9.8428 2.39737 9.8428C3.06679 9.89974 3.4015 10.5261 3.4015 10.5261C4.01513 11.5511 4.96347 11.2664 5.35397 11.0955C5.40975 10.64 5.57711 10.3553 5.80024 10.1845C4.29405 10.0136 2.73208 9.44421 2.73208 6.82488C2.73208 6.08463 3.011 5.45827 3.4015 5.00274C3.4015 4.77497 3.12257 4.09166 3.51307 3.18059C3.51307 3.18059 4.07091 3.00977 5.35397 3.8639C5.91181 3.69307 6.46966 3.63613 7.02751 3.63613C7.58536 3.63613 8.14321 3.69307 8.70105 3.8639C9.98411 2.95283 10.542 3.18059 10.542 3.18059C10.9324 4.14861 10.6535 4.83191 10.5977 5.00274C11.044 5.45827 11.2672 6.08463 11.2672 6.82488C11.2672 9.44421 9.70518 10.0136 8.19899 10.1845C8.42213 10.4122 8.64527 10.8108 8.64527 11.4372C8.64527 12.3482 8.64527 13.0885 8.64527 13.3163C8.64527 13.4871 8.75684 13.7149 9.09155 13.6579C11.7692 12.7468 13.6659 10.1845 13.6659 7.16653C13.7217 3.40836 10.7093 0.333496 7.02751 0.333496Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
--- a/docs/components/atoms/icons/IconHybrid.vue
+++ b/docs/components/atoms/icons/IconHybrid.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--carbon"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 32 32"
-  ><path d="M17 24.184V20h-2v4.184a3 3 0 1 0 2 0z" fill="currentColor" /><path d="M26 12a3.996 3.996 0 0 0-3.858 3H9.858a4 4 0 1 0 0 2h12.284A3.993 3.993 0 1 0 26 12zM6 18a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2zm20 0a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2z" fill="currentColor" /><path d="M19 5a3 3 0 1 0-4 2.816V12h2V7.816A2.992 2.992 0 0 0 19 5z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconKit.vue
+++ b/docs/components/atoms/icons/IconKit.vue
@ -1,12 +0,0 @@
-<template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0)">
-      <path d="M3 1.99999L2 2.99999L4.2 6.08099C4.29262 6.21074 4.41491 6.31646 4.55668 6.38934C4.69845 6.46223 4.85559 6.50017 5.015 6.49999H5.085C5.21648 6.49989 5.34669 6.52571 5.46818 6.57599C5.58966 6.62627 5.70004 6.70001 5.793 6.79299L8.468 9.46799L5.851 12.122C5.40339 11.9902 4.93124 11.9646 4.472 12.0471C4.01275 12.1296 3.57905 12.318 3.2053 12.5973C2.83154 12.8766 2.52802 13.2392 2.3188 13.6563C2.10959 14.0733 2.00043 14.5334 2 15C2.0006 15.4299 2.0936 15.8547 2.27271 16.2456C2.45182 16.6364 2.71285 16.9842 3.03811 17.2654C3.36337 17.5466 3.74526 17.7545 4.15792 17.8752C4.57057 17.9959 5.00434 18.0265 5.42985 17.9649C5.85535 17.9033 6.26264 17.7509 6.62413 17.5182C6.98561 17.2854 7.29284 16.9777 7.52501 16.6158C7.75717 16.2539 7.90884 15.8464 7.96975 15.4208C8.03065 14.9952 7.99936 14.5614 7.878 14.149L10.532 11.532L11.5 12.5L11.195 13.414C11.1364 13.5902 11.128 13.7792 11.1707 13.9599C11.2135 14.1405 11.3057 14.3057 11.437 14.437L14.793 17.793C14.9805 17.9805 15.2348 18.0858 15.5 18.0858C15.7652 18.0858 16.0195 17.9805 16.207 17.793L17.793 16.207C17.9805 16.0195 18.0858 15.7652 18.0858 15.5C18.0858 15.2348 17.9805 14.9805 17.793 14.793L14.437 11.437C14.3058 11.3057 14.1405 11.2135 13.9599 11.1707C13.7792 11.128 13.5902 11.1364 13.414 11.195L12.5 11.5L11.54 10.54L14.22 7.89699C14.6646 8.01567 15.1305 8.03066 15.5818 7.9408C16.0331 7.85095 16.4577 7.65866 16.8229 7.37874C17.1882 7.09883 17.4842 6.73878 17.6883 6.32636C17.8924 5.91393 17.999 5.46015 18 4.99999C18 4.73099 17.965 4.46999 17.898 4.22299L15.758 6.36399L14 5.99999L13.636 4.24299L15.777 2.10199C15.2677 1.96505 14.7313 1.9648 14.2219 2.10125C13.7124 2.2377 13.248 2.50604 12.8753 2.87922C12.5026 3.2524 12.2349 3.71723 12.0991 4.22685C11.9634 4.73647 11.9644 5.27287 12.102 5.78199L9.462 8.45999L6.793 5.79299C6.60545 5.6055 6.50006 5.35119 6.5 5.08599V5.01499C6.50002 4.85575 6.462 4.69881 6.38912 4.55723C6.31624 4.41564 6.21061 4.29351 6.081 4.20099L3 1.99999ZM12.646 12.646C12.6924 12.5994 12.7476 12.5625 12.8084 12.5373C12.8691 12.5121 12.9342 12.4991 13 12.4991C13.0658 12.4991 13.1309 12.5121 13.1916 12.5373C13.2524 12.5625 13.3076 12.5994 13.354 12.646L16.354 15.646C16.4005 15.6925 16.4374 15.7477 16.4625 15.8084C16.4877 15.8691 16.5006 15.9342 16.5006 16C16.5006 16.0657 16.4877 16.1308 16.4625 16.1916C16.4374 16.2523 16.4005 16.3075 16.354 16.354C16.3075 16.4005 16.2523 16.4374 16.1916 16.4625C16.1308 16.4877 16.0657 16.5006 16 16.5006C15.9343 16.5006 15.8692 16.4877 15.8084 16.4625C15.7477 16.4374 15.6925 16.4005 15.646 16.354L12.646 13.354C12.5994 13.3075 12.5625 13.2524 12.5373 13.1916C12.5121 13.1309 12.4991 13.0658 12.4991 13C12.4991 12.9342 12.5121 12.8691 12.5373 12.8084C12.5625 12.7476 12.5994 12.6924 12.646 12.646ZM5 13L5.471 13.242L6 13.268L6.287 13.713L6.732 14L6.758 14.529L7 15L6.758 15.471L6.732 16L6.287 16.287L6 16.732L5.471 16.758L5 17L4.529 16.758L4 16.732L3.713 16.287L3.268 16L3.242 15.471L3 15L3.242 14.529L3.268 14L3.713 13.713L4 13.268L4.529 13.242L5 13Z" fill="currentColor" />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="16" height="16" fill="white" transform="translate(2 2)" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
--- a/docs/components/atoms/icons/IconNpm.vue
+++ b/docs/components/atoms/icons/IconNpm.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 10v4h2v-3h1v3h1v-4H4m5 0v5h2v-1h2v-4H9m3 1v2h-1v-2h1m2-1v4h2v-3h1v3h1v-3h1v3h1v-4h-6M3 9h18v6h-9v1H8v-1H3V9z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconNuxtBridge.vue
+++ b/docs/components/atoms/icons/IconNuxtBridge.vue
@ -1,3 +0,0 @@
-<template>
-  <svg viewBox="0 0 568 289" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M105.365 183.284C161.654 157.422 219.244 64.129 227.008 7.046M181.669 1.788C177.258 33.024 83.023 133.863.76 177.934M189.542 2.732c61.84 114.358 214.646 306.74 347.993 141.883M231.098 1.304c23.17 105.268 181.771 292.873 290.458 139.889M541.033 136.009c1.939 27.604 6.824 90.458 25.987 97.575M132.872 72.038v119.676M139.04 65.938v125.776M253.581 59.892V197.26M258.992 69.637l.842 128.066M289.779 114.709v90.618M295.385 121.554l-.003 84.341M319.711 147.263v61.886M325.301 152.285l.723 57.28M352.124 173.609v43.94M358.424 177.317l.003 40.897M382.042 189.402v29.78M387.559 191.789l.784 27.827M414.444 199.134v21.416M420.23 199.346l.001 21.897M439.916 198.501v22.05M445.701 197.202v24.041M463.16 192.107v29.031M468.945 189.609v32.448M486.444 178.489v43.352M492.229 174.023l-.002 48.856M504.637 161.891v63.006M510.445 155.54v71.24M548.386 196.564v35.017M554.195 216.899l-.005 16.564M165.132 33.843v157.876M171.291 24.5l-.002 167.223" stroke="#00DC82" stroke-width="2" /><path d="M189.156 1.338l4.584-.395v286.53l-4.584 1.516V1.338z" fill="#40E5A1" /><path fill="#00DC82" d="M184.938 26.536h38.323v8.822h-38.323zM182.97 59.135h38.323v8.822H182.97zM182.97 91.733h38.323v8.822H182.97zM184.938 124.333h38.323v8.822h-38.323z" /><path d="M227.479 1.336l4.585-.394V287.47l-4.585 1.516V1.337zM522.195 136.145l2.643-.206v127.914l-2.642 1.05-.001-128.758z" fill="#40E5A1" /><path fill="#00DC82" d="M520.303 140.366h17.191v4.186h-17.191zM519.42 155.834h17.191v4.186H519.42zM519.42 171.304h17.191v4.186H519.42zM520.303 186.772h17.191v4.186h-17.191z" /><path d="M539.386 136.142l2.643-.206V263.85l-2.643 1.056V136.142z" fill="#40E5A1" /><path d="M567.372 238.089C444.413 215.892.278 215.177.278 215.177v-38.119c110.66-3.113 458.828 38.476 567.094 55.602v5.429z" fill="#00DC82" /><path d="M518.911 136.595l.317-.032-.317.099v-.067zM536.102 136.592l.317-.032-.317.099v-.067z" stroke="#00E889" /><path fill="#00DC82" d="M180.719 1.338h8.438v287.651h-8.438zM219.042 1.338h8.438v287.651h-8.438zM518.411 136.146h3.785v128.758h-3.785zM535.602 136.146h3.785v128.758h-3.785z" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconNuxtNitro.vue
+++ b/docs/components/atoms/icons/IconNuxtNitro.vue
@ -1,3 +0,0 @@
-<template>
-  <svg viewBox="0 0 450 325" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M293.063 10.056c56.455 7.127 145.001 79.138 140.169 192.691M293.063 16.666c52.999 6.827 136.412 77.692 131.798 181.466M291.992 23.152c49.096 6.552 126.443 69.359 124.458 172.627" stroke="#00DC82" stroke-width="2" /><circle cx="248.964" cy="180.002" r="143.734" stroke="#00DC82" stroke-width="2" /><circle cx="248.964" cy="177.258" r="37.599" stroke="#00DC82" stroke-width="3" /><path d="M273.682 117.498l-2.035 5.311c21.301 8.989 36.549 29.953 36.937 54.434h5.684c-.39-26.902-17.152-49.935-40.586-59.745z" fill="#00DC82" /><path d="M281.544 95.64l-2.825 7.577c29.555 12.213 50.873 40.764 51.412 74.023h7.885c-.541-36.549-23.957-68.272-56.472-81.6z" fill="#00DC82" /><path d="M291.548 67.793l-3.809 9.736c39.878 16.478 68.023 54.835 68.75 99.712h10.64c-.73-49.317-31.708-91.464-75.581-109.448z" fill="#00DC82" /><circle cx="248.964" cy="177.259" r="18.392" stroke="#00DC82" stroke-width="3" /><circle cx="142.228" cy="199.905" r="14.94" stroke="#00DC82" stroke-width="2" /><circle cx="225.106" cy="281.648" r="14.94" stroke="#00DC82" stroke-width="2" /><circle cx="181.709" cy="194.289" r="9.324" stroke="#00DC82" stroke-width="2" /><circle cx="189.858" cy="235.991" r="13.631" stroke="#00DC82" stroke-width="2" /><circle cx="248.279" cy="180.688" r="130.201" stroke="#00DC82" stroke-width="3" /><path d="M401.929 282.208c24.245 0 43.9-19.655 43.9-43.901 0-24.245-19.655-43.9-43.9-43.9-3.93 0-6.503.423-10.127 1.391l-.297-4.175c3.734-.931 6.402-1.331 10.424-1.331 26.518 0 48.016 21.497 48.016 48.015 0 26.519-21.498 48.016-48.016 48.016-16.015 0-30.199-7.84-38.922-19.892l2.62-3.43c7.902 11.594 21.213 19.207 36.302 19.207z" fill="#00DC82" /><path d="M401.929 272.605c19.767 0 35.669-15.73 35.669-34.983 0-19.254-15.902-34.983-35.669-34.983-4.343 0-7.588.52-11.433 1.911v-4.348c3.887-1.245 7.123-1.679 11.433-1.679 21.973 0 39.785 17.505 39.785 39.099 0 21.593-17.812 39.098-39.785 39.098-14.139 0-26.555-7.248-33.611-18.17l2.744-3.391c6.163 10.414 17.651 17.446 30.867 17.446z" fill="#00DC82" /><path d="M401.929 263.002c13.638 0 24.694-11.056 24.694-24.694s-11.056-24.694-24.694-24.694c-5.881 0-10.474 2.055-14.715 5.487l.674-5.487c4.336-2.613 8.609-4.116 14.041-4.116 15.911 0 28.809 12.899 28.809 28.81s-12.898 28.809-28.809 28.809c-13.051 0-23.827-6.597-27.369-18.497l3.264-4.116c1.959 11.679 11.869 18.498 24.105 18.498z" fill="#00DC82" /><path d="M108.631 149.881H75.365V69.547c0-37.555 30.444-68 68-68h138.164v38.65" stroke="#00DC82" stroke-width="3" /><path stroke="#00DC82" stroke-width="2" d="M283.49 7.708h8.811v17.943h-8.811zM48.44 102.206h25.925v28.717H48.44zM48.838 107.08H2.796M48.838 116.868H2.796M48.838 126.392H2.796M115.194 232.746H58.853l-17.877 18.449v52.009h133.781" /><path d="M41.282 298.48L9.887 283.065l3.611-8.802 27.784 13.013M40.976 272.848l-30.243-14.67 3.61-8.802 26.633 12.639M8.43 242.485l7.372 3.24-6.935 15.778-7.371-3.24zM8.631 268.316l6.142 2.473L8.648 286l-6.142-2.473zM253.637 297.644v-63.268c34.998-2.159 54.249-25.026 54.249-51.609h58.098c-14.301 95.667-83.405 116.731-112.347 114.877zM137.434 176.212h58.716c2.215-32.526 25.277-50.39 52.061-50.356v-58.35c-80.088 0-110.777 74.058-110.777 108.706zM148.271 176.579c3.346-36.424 34.406-98.159 100.169-98.159M162.333 176.597c2.876-31.305 29.57-84.362 86.09-84.362M178.238 176.617c2.344-25.514 24.101-68.757 70.165-68.757M264.06 233.927v63.561M276.397 230.031v65.127M288.063 222.684v68.544M300.951 208.125v78.11M314.2 182.767v95.294M314.482 196.151h48.525M314.267 210.912h45.076M313.969 226.273h39.435M314.484 241.378l31.981.055M314.481 255.77l21.778-.028M313.804 268.183h11.119M141.187 185.053l40.49-.061M190.008 190.066l46.787 82.304M131.048 209.839l81.679 80.139" stroke="#00DC82" stroke-width="2" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconPresets.vue
+++ b/docs/components/atoms/icons/IconPresets.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"><path d="M41.5 10h-6M27.5 6v8M27.5 10h-22M13.5 24h-8M21.5 20v8M43.5 24h-22M41.5 38h-6M27.5 34v8M27.5 38h-22" /></g></svg>
-</template>
--- a/docs/components/atoms/icons/IconRabbit.vue
+++ b/docs/components/atoms/icons/IconRabbit.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--fluent"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 28 28"
-  ><g fill="none"><path d="M18.184 5.55l6.555 6.554a4.305 4.305 0 0 1-4.038 7.234v.246A2.415 2.415 0 0 1 18.286 22H15.5v-.826A3.173 3.173 0 0 0 12.335 18h-1.59a.75.75 0 0 0 0 1.5h1.59c.917 0 1.666.75 1.666 1.674V22H7.399A2.401 2.401 0 0 1 5 19.584v-3.15c0-.233.015-.463.043-.69A2.875 2.875 0 1 1 7.55 11.82c.831-.519 1.814-.82 2.868-.82h4.849c.729 0 1.424.144 2.06.404c.197-.332.438-.615.72-.905l-2.406-2.406a1.798 1.798 0 1 1 2.543-2.543z" fill="currentColor" /></g></svg>
-</template>
--- a/docs/components/atoms/icons/IconSuspense.vue
+++ b/docs/components/atoms/icons/IconSuspense.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--carbon"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 32 32"
-  ><path d="M8 16l8-8l8 8l-8 8z" fill="currentColor" /><path d="M16 4A12 12 0 1 1 4 16A12.014 12.014 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconTwitter.vue
+++ b/docs/components/atoms/icons/IconTwitter.vue
@ -1,10 +0,0 @@
-<template>
-  <svg fill="none" viewBox="0 0 24 24">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M22 5.897c-.75.33-1.5.577-2.333.66A4.4 4.4 0 0021.5 4.33c-.833.495-1.667.825-2.583.99a4.053 4.053 0 00-3-1.32c-2.25 0-4.084 1.814-4.084 4.041 0 .33 0 .66.084.907-3.5-.165-6.5-1.814-8.5-4.288-.417.66-.584 1.32-.584 2.062 0 1.402.75 2.639 1.834 3.381-.667 0-1.334-.165-1.834-.495v.083c0 1.98 1.417 3.629 3.25 3.958-.333.083-.666.165-1.083.165-.25 0-.5 0-.75-.082.5 1.65 2 2.804 3.833 2.804C6.667 17.608 4.917 18.268 3 18.268c-.333 0-.667 0-1-.082C3.833 19.34 6 20 8.25 20c7.583 0 11.667-6.186 11.667-11.546v-.495c.833-.578 1.5-1.32 2.083-2.062z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
--- a/docs/components/atoms/icons/IconTypeScript.vue
+++ b/docs/components/atoms/icons/IconTypeScript.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.71 1h30.58C37.338 1 39 2.661 39 4.71v30.58A3.71 3.71 0 0135.29 39H4.71A3.711 3.711 0 011 35.29V4.71C1 2.662 2.662 1 4.71 1zm19.817 30.354v-.147l-.14.033c.046.039.093.077.14.114zm0 0v3.564c.602.312 1.336.542 2.153.698.816.156 1.707.23 2.597.23.891 0 1.707-.082 2.524-.253a6.398 6.398 0 002.078-.816c.601-.393 1.113-.89 1.41-1.559.297-.668.527-1.41.527-2.375 0-.675-.104-1.261-.304-1.78-.2-.52-.49-.966-.89-1.337a5.902 5.902 0 00-1.337-1.039 16.568 16.568 0 00-1.781-.89c-.304-.125-.573-.246-.84-.366a38.461 38.461 0 00-.496-.22c-.386-.194-.72-.387-.965-.58a2.65 2.65 0 01-.63-.623 1.303 1.303 0 01-.223-.742c0-.253.066-.483.2-.69.134-.208.32-.38.557-.528.237-.148.534-.26.89-.341a5.186 5.186 0 011.188-.119c.311 0 .638.023.965.07a8.255 8.255 0 012.078.579c.326.148.63.32.89.512v-3.488a9.16 9.16 0 00-1.855-.483 14.867 14.867 0 00-2.3-.155c-.892 0-1.708.096-2.524.282a5.876 5.876 0 00-2.079.89c-.6.4-1.039.89-1.41 1.559-.348.623-.52 1.336-.52 2.226 0 1.114.32 2.078.966 2.82.638.817 1.633 1.41 2.894 2.005.443.18.841.359 1.229.534l.181.082c.446.2.817.408 1.114.623.319.215.571.453.742.705.185.253.282.55.282.89a1.385 1.385 0 01-.17.668 1.46 1.46 0 01-.528.535 3.012 3.012 0 01-.89.356 5.43 5.43 0 01-1.262.126 6.729 6.729 0 01-2.375-.423 7.036 7.036 0 01-2.086-1.147zm-1.484-9.276h-4.75V35.66h-3.785V22.078h-4.75v-3.043h13.285v3.043z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconVite.vue
+++ b/docs/components/atoms/icons/IconVite.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.29 8.384l-.547 9.368a.436.436 0 00.53.455l3.29-.77a.437.437 0 01.522.516l-.977 4.856a.436.436 0 00.55.51l2.032-.627a.436.436 0 01.551.51l-1.553 7.628c-.097.478.529.738.79.329l.173-.274 9.627-19.495c.16-.327-.117-.7-.47-.63l-3.386.663a.438.438 0 01-.499-.554l.799-2.81 9.253-1.712c.721-.133 1.27.646.912 1.296l-15.963 28.97a.861.861 0 01-1.51.006L3.133 7.646c-.365-.648.182-1.434.906-1.303l11.25 2.04z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconVue.vue
+++ b/docs/components/atoms/icons/IconVue.vue
@ -1,3 +0,0 @@
-<template>
-  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 2L13 24L26 2H16L13 7.3L10 2H0ZM3.5 4H7.271L13 14L18.729 4H22.5L13 20.1L3.5 4Z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/icons/IconWebpack.vue
+++ b/docs/components/atoms/icons/IconWebpack.vue
@ -1,13 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--cib"
-    width="32"
-    height="32"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 32 32"
-  ><path d="M28.021 24.161l-11.552 6.505v-5.068l7.198-3.943zm.792-.713V9.839l-4.229 2.432v8.745zm-24.912.713l11.552 6.505v-5.068l-7.198-3.943zm-.792-.713V9.839l4.229 2.432v8.745zm.495-14.49l11.849-6.672v4.901l-7.646 4.188zm24.714 0L16.469 2.286v4.901l7.646 4.188zm-12.865 15.49l-7.099-3.891v-7.703l7.099 4.083zm1.016 0l7.099-3.891v-7.703l-7.099 4.083zM8.833 11.964l7.13-3.901l7.13 3.901l-7.13 4.099z" fill="currentColor" /></svg>
-</template>
--- a/docs/components/atoms/logo/LogoAzure.vue
+++ b/docs/components/atoms/logo/LogoAzure.vue
@ -1,46 +0,0 @@
-<template>
-  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M34.7247 6.81672H61.8476L33.6914 90.2407C33.402 91.0979 32.8511 91.8428 32.1161 92.3705C31.3812 92.8982 30.4993 93.1821 29.5945 93.1823H8.48618C7.80067 93.1824 7.12499 93.0193 6.51504 92.7064C5.90509 92.3935 5.3784 91.9399 4.97855 91.3831C4.5787 90.8263 4.31718 90.1823 4.21562 89.5043C4.11406 88.8264 4.17538 88.134 4.39451 87.4844L30.6268 9.75838C30.9161 8.90078 31.4671 8.15554 32.2022 7.62762C32.9374 7.09971 33.8197 6.81572 34.7247 6.81567V6.81672Z" fill="url(#paint0_linear)" />
-    <path d="M74.14 62.7717H31.1295C30.7297 62.7713 30.339 62.8913 30.0083 63.1161C29.6776 63.3409 29.4222 63.6601 29.2755 64.032C29.1288 64.404 29.0976 64.8116 29.1858 65.2016C29.274 65.5916 29.4776 65.946 29.7702 66.2186L57.4077 92.0144C58.2123 92.765 59.2718 93.1824 60.3723 93.1821H84.7264L74.14 62.7717Z" fill="#0078D4" />
-    <path d="M34.727 6.81668C33.8121 6.81317 32.92 7.1023 32.181 7.64185C31.4421 8.18139 30.895 8.94308 30.6197 9.81564L4.4291 87.4136C4.19523 88.0655 4.1218 88.7641 4.21504 89.4504C4.30828 90.1367 4.56543 90.7904 4.96476 91.3563C5.36408 91.9221 5.89382 92.3835 6.50916 92.7014C7.12451 93.0192 7.80735 93.1842 8.49993 93.1823H30.1531C30.9595 93.0382 31.7133 92.6826 32.3373 92.1519C32.9614 91.6212 33.4334 90.9343 33.7051 90.1615L38.9281 74.7688L57.5843 92.1698C58.3661 92.8165 59.3468 93.174 60.3614 93.1823H84.6249L73.9833 62.7719L42.9614 62.7792L61.9479 6.81668H34.727Z" fill="url(#paint1_linear)" />
-    <path d="M69.3706 9.75415C69.0817 8.89794 68.5315 8.15393 67.7975 7.62694C67.0634 7.09995 66.1825 6.81655 65.2789 6.81665H35.0508C35.9544 6.8167 36.8352 7.10017 37.5692 7.62713C38.3032 8.1541 38.8535 8.89802 39.1424 9.75415L65.3758 87.4833C65.5951 88.133 65.6565 88.8255 65.5551 89.5037C65.4536 90.1818 65.1921 90.826 64.7923 91.383C64.3924 91.94 63.8657 92.3939 63.2557 92.7069C62.6456 93.02 61.9698 93.1833 61.2841 93.1833H91.5133C92.1989 93.1831 92.8746 93.0197 93.4845 92.7066C94.0944 92.3934 94.621 91.9396 95.0207 91.3826C95.4204 90.8256 95.6818 90.1814 95.7832 89.5034C95.8846 88.8253 95.8232 88.1329 95.6039 87.4833L69.3706 9.75415Z" fill="url(#paint2_linear)" />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="44.6101"
-        y1="13.2167"
-        x2="16.4424"
-        y2="96.4313"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#114A8B" />
-        <stop offset="1" stop-color="#0669BC" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear"
-        x1="53.4114"
-        y1="51.9969"
-        x2="46.8958"
-        y2="54.2"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-opacity="0.3" />
-        <stop offset="0.071" stop-opacity="0.2" />
-        <stop offset="0.321" stop-opacity="0.1" />
-        <stop offset="0.623" stop-opacity="0.05" />
-        <stop offset="1" stop-opacity="0" />
-      </linearGradient>
-      <linearGradient
-        id="paint2_linear"
-        x1="49.8289"
-        y1="10.7896"
-        x2="80.7487"
-        y2="93.1656"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#3CCBF4" />
-        <stop offset="1" stop-color="#2892DF" />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
--- a/docs/components/atoms/logo/LogoCloudFlare.vue
+++ b/docs/components/atoms/logo/LogoCloudFlare.vue
@ -1,7 +0,0 @@
-<template>
-  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M76.1419 47.3651L74.2748 46.6184C65.4994 66.3636 30.5896 54.3595 28.489 60.2334C28.1389 64.2011 47.5532 60.9878 61.4326 61.6604C65.665 61.8653 67.7874 65.0603 65.9902 70.268L69.5301 70.2789C73.6135 57.5492 86.6452 64.0457 87.1898 59.8445C86.2951 57.0823 72.2129 59.8445 76.1419 47.3651Z" fill="white" />
-    <path d="M66.9917 68.0907C67.5518 66.2236 67.3651 64.3564 66.4317 63.236C65.4979 62.1156 64.1908 61.3688 62.5103 61.1822L30.0207 60.8084C29.834 60.8084 29.6473 60.6218 29.4607 60.6218C29.274 60.4351 29.274 60.2484 29.4607 60.0617C29.6473 59.6884 29.834 59.5013 30.2074 59.5013L62.8837 59.128C66.805 58.9413 70.913 55.767 72.4065 52.0327L74.274 47.178C74.274 46.991 74.4607 46.8043 74.274 46.6176C72.2198 37.0949 63.6308 29.9993 53.5476 29.9993C44.2115 29.9993 36.1825 35.9744 33.3816 44.3771C31.5145 43.07 29.274 42.3229 26.6598 42.51C22.1784 42.8833 18.6308 46.6176 18.0704 51.099C17.8837 52.2194 18.0704 53.3399 18.2574 54.4599C10.9752 54.6466 5 60.6218 5 68.0907C5 68.8374 5 69.3978 5.18668 70.1445C5.18668 70.5183 5.56004 70.7049 5.74707 70.7049H65.6846C66.058 70.7049 66.4317 70.5183 66.4317 70.1445L66.9917 68.0907Z" fill="#F4811F" />
-    <path d="M77.2603 47.1782H76.3265C76.1398 47.1782 75.9531 47.3649 75.7665 47.5516L74.4594 52.0329C73.8993 53.9001 74.086 55.7676 75.0197 56.8877C75.9531 58.0081 77.2603 58.7548 78.9407 58.9419L85.8496 59.3152C86.0363 59.3152 86.223 59.5019 86.4097 59.5019C86.5964 59.6886 86.5964 59.8753 86.4097 60.0619C86.223 60.4356 86.0363 60.6223 85.6626 60.6223L78.5674 60.9957C74.646 61.1824 70.5384 64.3566 69.0446 68.0909L68.6709 69.7717C68.4842 69.9584 68.6709 70.3318 69.0446 70.3318H93.6919C94.0653 70.3318 94.252 70.1451 94.252 69.7717C94.6253 68.2779 94.9987 66.5975 94.9987 64.9167C94.9987 55.2072 86.9697 47.1782 77.2603 47.1782Z" fill="#FAAD3F" />
-  </svg>
-</template>
--- a/docs/components/atoms/logo/LogoFirebase.vue
+++ b/docs/components/atoms/logo/LogoFirebase.vue
@ -1,31 +0,0 @@
-<template>
-  <svg width="0.73em" height="1em" viewBox="0 0 256 351"><defs><filter
-    id="IconifyId-17c6fdde69b-f33216-99"
-    x="-50%"
-    y="-50%"
-    width="200%"
-    height="200%"
-    filterunits="objectBoundingBox"
-  ><feGaussianBlur stddeviation="17.5" in="SourceAlpha" result="shadowBlurInner1" /><feOffset in="shadowBlurInner1" result="shadowOffsetInner1" /><feComposite
-    in="shadowOffsetInner1"
-    in2="SourceAlpha"
-    operator="arithmetic"
-    k2="-1"
-    k3="1"
-    result="shadowInnerInner1"
-  /><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowInnerInner1" /></filter><filter
-    id="IconifyId-17c6fdde69b-f33216-100"
-    x="-50%"
-    y="-50%"
-    width="200%"
-    height="200%"
-    filterunits="objectBoundingBox"
-  ><feGaussianBlur stddeviation="3.5" in="SourceAlpha" result="shadowBlurInner1" /><feOffset dx="1" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1" /><feComposite
-    in="shadowOffsetInner1"
-    in2="SourceAlpha"
-    operator="arithmetic"
-    k2="-1"
-    k3="1"
-    result="shadowInnerInner1"
-  /><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" in="shadowInnerInner1" /></filter><path id="IconifyId-17c6fdde69b-f33216-101" d="M1.253 280.732l1.605-3.131l99.353-188.518l-44.15-83.475C54.392-1.283 45.074.474 43.87 8.188L1.253 280.732z" /><path id="IconifyId-17c6fdde69b-f33216-102" d="M134.417 148.974l32.039-32.812l-32.039-61.007c-3.042-5.791-10.433-6.398-13.443-.59l-17.705 34.109l-.53 1.744l31.678 58.556z" /></defs><path d="M0 282.998l2.123-2.972L102.527 89.512l.212-2.017L58.48 4.358C54.77-2.606 44.33-.845 43.114 6.951L0 282.998z" fill="#FFC24A" /><use fill="#FFA712" fillRule="evenodd" xlink:href="#IconifyId-17c6fdde69b-f33216-101" /><use filter="url(#IconifyId-17c6fdde69b-f33216-99)" xlink:href="#IconifyId-17c6fdde69b-f33216-101" /><path d="M135.005 150.38l32.955-33.75l-32.965-62.93c-3.129-5.957-11.866-5.975-14.962 0L102.42 87.287v2.86l32.584 60.233z" fill="#F4BD62" /><use fill="#FFA50E" fillRule="evenodd" xlink:href="#IconifyId-17c6fdde69b-f33216-102" /><use filter="url(#IconifyId-17c6fdde69b-f33216-100)" xlink:href="#IconifyId-17c6fdde69b-f33216-102" /><path fill="#F6820C" d="M0 282.998l.962-.968l3.496-1.42l128.477-128l1.628-4.431l-32.05-61.074z" /><path d="M139.121 347.551l116.275-64.847l-33.204-204.495c-1.039-6.398-8.888-8.927-13.468-4.34L0 282.998l115.608 64.548a24.126 24.126 0 0 0 23.513.005" fill="#FDE068" /><path d="M254.354 282.16L221.402 79.218c-1.03-6.35-7.558-8.977-12.103-4.424L1.29 282.6l114.339 63.908a23.943 23.943 0 0 0 23.334.006l115.392-64.355z" fill="#FCCA3F" /><path d="M139.12 345.64a24.126 24.126 0 0 1-23.512-.005L.931 282.015l-.93.983l115.607 64.548a24.126 24.126 0 0 0 23.513.005l116.275-64.847l-.285-1.752l-115.99 64.689z" fill="#EEAB37" /></svg>
-</template>
--- a/docs/components/atoms/logo/LogoNetlify.vue
+++ b/docs/components/atoms/logo/LogoNetlify.vue
--- a/docs/components/atoms/logo/LogoPM2.vue
+++ b/docs/components/atoms/logo/LogoPM2.vue
--- a/docs/components/atoms/logo/LogoVercel.vue
+++ b/docs/components/atoms/logo/LogoVercel.vue
@ -1,12 +0,0 @@
-<template>
-  <svg
-    width="160"
-    height="160"
-    viewBox="0 0 160 160"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    class="text-black dark:text-white"
-  >
-    <path d="M80.0761 12L159.152 148.965H1L80.0761 12Z" fill="currentColor" />
-  </svg>
-</template>
--- a/docs/components/molecules/HeroParallax.vue
+++ b/docs/components/molecules/HeroParallax.vue
@ -1,58 +0,0 @@
-<template>
-  <div ref="containerImg" class="absolute top-0 left-0 z-10 w-full h-full select-none pointer-events-none transition-opacity ease-out duration-800" :class="[hidden ? 'opacity-0' : 'opacity-100']">
-    <img
-      ref="gem3"
-      data-speed="1"
-      loading="lazy"
-      :src="`/img/home/hero/gem-3.svg`"
-      class="hidden lg:block absolute left-1/2 -ml-16 top-20"
-      alt="An image of a green gem from nuxt galaxy"
-    >
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted, onBeforeUnmount } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  setup () {
-    const containerImg = ref(null)
-    const hidden = ref(true)
-
-    function parallax (e) {
-      const images = Array.from(containerImg.value.children)
-      if (hidden.value) {
-        hidden.value = false
-      }
-
-      for (const el of images) {
-        const image = el
-        const speed = parseInt(image.getAttribute('data-speed'))
-        const x = (window.innerWidth - e.pageX * speed) / 100
-        const y = (window.innerHeight - e.pageY * speed) / 100
-        image.style.transform = `translateX(${x}px) translateY(${y}px)`
-      }
-    }
-
-    if (process.client) {
-      const isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
-      if (isTouchDevice) {
-        onMounted(() => {
-          setTimeout(() => {
-            hidden.value = false
-          }, 200)
-        })
-      } else {
-        onMounted(() => window.addEventListener('mousemove', parallax))
-        onBeforeUnmount(() => window.removeEventListener('mousemove', parallax))
-      }
-    }
-
-    return {
-      hidden,
-      containerImg,
-      parallax
-    }
-  }
-})
-</script>
--- a/docs/components/molecules/HeroSection.vue
+++ b/docs/components/molecules/HeroSection.vue
@ -1,33 +0,0 @@
-<template>
-  <div class="overflow-hidden relative mx-auto max-w-8xl">
-    <HeroParallax />
-    <div class="flex flex-wrap justify-center py-0 section">
-      <section class="flex flex-col justify-start w-full px-4 pt-36 pb-52 md:pt-40 lg:pb-56 lg:pt-48 text-center">
-        <div>
-          <span class="nuxt-text-highlight">Currently in public beta</span>
-        </div>
-        <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 my-8">
-          <Markdown use="title" unwrap="p" />
-        </h1>
-        <h2
-          class="
-            font-normal
-            text-body-base
-            xs:text-body-lg
-            md:text-body-xl
-            2xl:text-body-2xl
-            px-8
-            sm:px-0
-            text-secondary-dark
-            dark:text-cloud-lighter
-          "
-        >
-          <Markdown use="description" unwrap="p" />
-        </h2>
-        <p class="text-center mt-2 text-secondary-dark dark:text-cloud-lighter">
-          <Markdown use="body" unwrap="p" />
-        </p>
-      </section>
-    </div>
-  </div>
-</template>
--- a/docs/components/molecules/HomeHero.vue
+++ b/docs/components/molecules/HomeHero.vue
@ -1,90 +0,0 @@
-<template>
-  <div class="overflow-hidden relative dark:bg-sky-black dark:text-white pt-12">
-    <div class="flex flex-wrap justify-center py-0 section d-container-content">
-      <section class="flex flex-col justify-start w-full px-4 pb-24 sm:pt-12 sm:pb-36 lg:pt-24 lg:pb-50 text-center z-20">
-        <div class="highlight-box mx-auto mt-6 rounded-md">
-          <NuxtLink to="/community/roadmap" class="text-sm inline-flex items-center space-x-1 px-4 md:px-5 py-1 md:py-2 font-medium">
-            <span>Check out the Nuxt 3 roadmap</span><IconArrowRight class="mt-1px" />
-          </NuxtLink>
-        </div>
-        <Gem class="block m-x-auto" />
-        <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-6 pt-2">
-          <Markdown use="title" unwrap="p" />
-        </h1>
-        <h2
-          class="
-            font-normal
-            text-body-base
-            xs:text-body-lg
-            md:text-body-xl
-            2xl:text-body-2xl
-            mb-8
-            px-8
-            sm:px-0
-            dark:text-cloud-lighter
-            text-cloud-darker
-          "
-        >
-          <Markdown use="description" unwrap="p" />
-        </h2>
-        <div
-          class="
-            flex flex-col
-            sm:flex-row
-            flex-wrap
-            items-center
-            justify-center
-            space-y-3
-            sm:space-y-0 sm:space-x-3
-            xl:space-x-4
-          "
-        >
-          <SectionButton
-            :href="primary.url"
-            :aria-label="primary.text"
-            size="lg"
-            class="dark:bg-sky-black dark:hover:bg-sky-darker hover:bg-cloud-surface"
-            :icon-left="primary.icon"
-          >
-            {{ primary.text }}
-          </SectionButton>
-          <Markdown use="secondary-button" unwrap="p" />
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    primary: {
-      type: Object,
-      default: () => ({
-        text: 'Star on GitHub',
-        url: 'https://github.com',
-        icon: 'IconGitHub'
-      })
-    },
-    secondary: {
-      type: Object,
-      default: () => ({
-        text: 'Getting started',
-        url: '/docs'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="postcss">
-.highlight-box {
-  @apply transition-shadow duration-300;
-
-  box-shadow: #00DC82AA 0px 0px 8px;
-
-  &:hover {
-    box-shadow: #00DC82 0px 0px 16px;
-  }
-}
-</style>
--- a/docs/components/organisms/HomeFeatures.vue
+++ b/docs/components/organisms/HomeFeatures.vue
@ -1,36 +0,0 @@
-<template>
-  <div class="relative">
-    <section class="py-24 md:py-40 text-white light:text-secondary-black">
-      <NuxtContainer class="flex flex-col items-center">
-        <div class="flex flex-col w-full items-center col-span-12">
-          <div class="mb-2">
-            <span class="text-cloud-dark dark:text-cloud-light font-bold text-lg">{{ category }}</span>
-          </div>
-          <h2 class="font-normal text-center font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
-            <Markdown use="title" unwrap="p" />
-          </h2>
-          <p class="font-normal text-center text-body-base md:text-body-lg 2xl:text-body-xl mb-12">
-            <Markdown use="description" unwrap="p" />
-          </p>
-          <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            <slot />
-          </div>
-          <Markdown use="bottom" />
-        </div>
-      </NuxtContainer>
-    </section>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    category: {
-      type: String,
-      default: 'Category'
-    }
-  }
-})
-</script>
--- a/docs/components/organisms/SectionContentItem.vue
+++ b/docs/components/organisms/SectionContentItem.vue
@ -1,75 +0,0 @@
-<template>
-  <component
-    :is="component"
-    :to="to"
-    :aria-label="title"
-    class="flex flex-col items-center transition duration-200 p-6 rounded-md"
-    :class="hoverClass"
-  >
-    <InjectComponent
-      :component="image"
-      class="mb-4 transition duration-200 text-primary group-hover:text-primary-400"
-      :class="imageClass"
-    >
-      <img loading="lazy" :src="image" :alt="`A ${title} image`">
-    </InjectComponent>
-    <h3 class="relative inline-flex mb-1 text-center text-body-lg items-center lg:text-body-xl font-bold">
-      {{ title }}
-      <span v-if="soon" class="absolute -right-48px inline-flex items-center mt-1px px-1.5 py-0.5 rounded text-xs font-medium font-mono bg-cloud-surface dark:bg-sky-dark dark:text-white">soon</span>
-    </h3>
-    <p class="text-center text-sm lg:text-base mb-4">
-      {{ description }}
-    </p>
-  </component>
-</template>
-
-<script>
-import { defineComponent, computed } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    image: {
-      type: String,
-      default: ''
-    },
-    imageClass: {
-      type: String,
-      default: ''
-    },
-    soon: {
-      type: Boolean,
-      default: false
-    },
-    hoverClass: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
-    },
-    to: {
-      type: String,
-      default: ''
-    },
-    linkName: {
-      type: String,
-      default: ''
-    }
-  },
-  setup (props) {
-    const component = computed(() => {
-      if (props.to && !props.linkName) {
-        return 'Link'
-      }
-      return 'div'
-    })
-
-    return { component }
-  }
-})
-</script>
--- a/docs/components/templates/AutoGenerated.vue
+++ b/docs/components/templates/AutoGenerated.vue
@ -1,8 +0,0 @@
-<template>
-  <Alert icon="🤖">
-    This section is auto-generated from the source code.
-  </Alert>
-</template>
-
-<script>
-</script>
--- a/docs/components/templates/Blank.vue
+++ b/docs/components/templates/Blank.vue
@ -1,16 +0,0 @@
-<template>
-  <DocusContent :document="page" :class="page.bgClass" />
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-
-export default defineComponent({
-  props: {
-    page: {
-      type: Object,
-      required: true
-    }
-  }
-})
-</script>
--- a/docs/components/templates/Error.vue
+++ b/docs/components/templates/Error.vue
@ -1,33 +0,0 @@
-<template>
-  <AppPage class="min-h-screen-sm relative z-0 h-full">
-    <div class="relative flex flex-col items-center justify-center px-2 sm:px-4 mt-20 lg:mt-32 md:px-0 z-10">
-      <h1 class="font-serif text-center text-display-6 md:text-display-5 2xl:text-display-4 mb-6">
-        {{ error.message }}
-      </h1>
-      <NuxtLink
-        to="/"
-        size="md"
-        class="text-gray-800 bg-primary hover:bg-primary-400 focus:bg-primary-400 font-medium rounded-md px-4 py-2.5"
-      >
-        Go Home
-      </NuxtLink>
-    </div>
-  </AppPage>
-</template>
-
-<script>
-import { defineComponent } from '@nuxtjs/composition-api'
-export default defineComponent({
-  props: {
-    error: {
-      type: Object,
-      required: true
-    }
-  },
-  head () {
-    return {
-      title: this.error.message
-    }
-  }
-})
-</script>
--- a/docs/components/templates/Example.vue
+++ b/docs/components/templates/Example.vue
@ -1,45 +0,0 @@
-<template>
-  <AppPage>
-    <PageContent :page="page" />
-    <template #prev-next>
-      <PagePrevNext :prev="prev" :next="next" />
-    </template>
-  </AppPage>
-</template>
-
-<script>
-import {
-  defineComponent,
-  ref,
-  useContext,
-  useFetch
-} from '@nuxtjs/composition-api'
-export default defineComponent({
-  props: {
-    page: {
-      type: Object,
-      required: true
-    }
-  },
-  setup (props) {
-    const { $docus } = useContext()
-    const prev = ref(null)
-    const next = ref(null)
-    useFetch(async () => {
-      const [prevLink, nextLink] = await $docus.getPreviousAndNextLink(
-        props.page
-      )
-      prev.value = prevLink
-      next.value = nextLink
-    })
-    return {
-      prev,
-      next
-    }
-  },
-  templateOptions: {
-    aside: true,
-    fluid: false
-  }
-})
-</script>
--- a/docs/content/1.getting-started/1.introduction.md
+++ b/docs/content/1.getting-started/1.introduction.md
@ -1,3 +1,9 @@
+---
+navigation.icon: uil:info-circle
+titleTemplate: '%s'
+description: Nuxt's goal is to make web development intuitive and performant with a great DX in mind.
+---
+
 # What is Nuxt?

 Nuxt's goal is to make web development intuitive and performant with a great developer experience in mind.
--- a/docs/content/1.getting-started/10.deployment.md
+++ b/docs/content/1.getting-started/10.deployment.md
@ -1,3 +1,8 @@
+---
+navigation.icon: uil:rocket
+description: Deploy on a Node.js server, pre-render for static hosting and to serverless or edge environments.
+---
+
 # Deployment

 A Nuxt application can be deployed on a Node.js server, pre-rendered for static hosting, or deployed to serverless or edge (CDN) environments.
--- a/docs/content/1.getting-started/10.upgrade-guide/_dir.yml
+++ b/docs/content/1.getting-started/10.upgrade-guide/_dir.yml
@ -0,0 +1 @@
+navigation.icon: uil:arrow-circle-up
--- a/docs/content/1.getting-started/11.upgrade.md
+++ b/docs/content/1.getting-started/11.upgrade.md
@ -1,3 +1,7 @@
+---
+navigation.icon: uil:arrow-up
+description: Have a Nuxt 2 project to migrate? Use these guides to upgrade your applications to Nuxt 3.
+---
 # Upgrade Guide

 Have a Nuxt 2 project to migrate? Use these guides to upgrade your Nuxt applications to Nuxt 3 or take the first step in that direction with Nuxt Bridge.
@ -46,7 +50,7 @@ If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you ca

 ### Latest release

-To upgrade Nuxt 3 to the latest release, use the `nuxi upgrade` command.
+To upgrade Nuxt 3 to the [latest release](/community/changelog), use the `nuxi upgrade` command.

 ```bash
 npx nuxi upgrade
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@ -1,13 +1,17 @@
+---
+navigation.icon: uil:play-circle
+---
+
 # Installation

-Starting fresh? Getting started with Nuxt 3 is straightforward!
+Get started with Nuxt quickly with our online starters or start locally with your terminal.

 ## Play Online

 You can start playing with Nuxt 3 in your browser using our online sandboxes:

-:button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank}
-:button-link[Play on CodeSandbox]{href="https://codesandbox.io/p/github/nuxt/starter/v3-codesandbox" blank}
+:button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank .mr-2}
+:button-link[Play on CodeSandbox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}

 ## Prerequisites

--- a/docs/content/1.getting-started/3.configuration.md
+++ b/docs/content/1.getting-started/3.configuration.md
@ -1,3 +1,8 @@
+---
+navigation.icon: uil:wrench
+description: Nuxt is configured with sensible defaults. The config file can override or extend them.
+---
+
 # Configuration

 By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/guide/directory-structure/nuxt.config) file can override or extend this default configuration.
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@ -1,3 +1,7 @@
+---
+navigation.icon: uil:window-section
+---
+
 # Views

 Nuxt provides several component layers to implement the user interface of your application.
--- a/docs/content/1.getting-started/4.assets.md
+++ b/docs/content/1.getting-started/4.assets.md
@ -1,6 +1,10 @@
+---
+navigation.icon: uil:image
+---
+
 # Assets

-Nuxt uses two directories to handle assets like stylesheets, fonts or images:
+Nuxt uses two directories to handle assets like stylesheets, fonts or images.

 - The [`public/` directory](/guide/directory-structure/public) content is served at the server root as-is.
 - The [`assets/` directory](/guide/directory-structure/assets) contains by convention every asset that you want the build tool (Vite or Webpack) to process.
--- a/docs/content/1.getting-started/5.routing.md
+++ b/docs/content/1.getting-started/5.routing.md
@ -1,3 +1,7 @@
+---
+navigation.icon: uil:sign-alt
+description: Nuxt file-system routing creates a route for every file in the pages/ directory.
+---
 # Routing

 One of Nuxt core feature is the file-system router. Every Vue file created inside the pages/ directory creates a corresponding URL (or route) that displays the content of the file. Nuxt leverages code-splitting on each page by using dynamic imports to ship the minimum of JavaScript for the requested route.
--- a/docs/content/1.getting-started/5.seo-meta.md
+++ b/docs/content/1.getting-started/5.seo-meta.md
@ -1,3 +1,8 @@
+---
+navigation.icon: uil:file-search-alt
+description: Nuxt provides good default values for meta tags, but you can override these if you need to.
+---
+
 # SEO and Meta

 Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
--- a/docs/content/1.getting-started/6.data-fetching.md
+++ b/docs/content/1.getting-started/6.data-fetching.md
@ -1,6 +1,11 @@
+---
+navigation.icon: uil:channel
+description: Nuxt provides composables to handle data fetching within your application.
+---
+
 # Data Fetching

-Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` to handle data fetching within your application.
+Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application.

 ::alert{icon=👉}
 **`useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` only work during `setup` or `Lifecycle Hooks`**
--- a/docs/content/1.getting-started/7.state-management.md
+++ b/docs/content/1.getting-started/7.state-management.md
@ -1,6 +1,11 @@
+---
+navigation.icon: uil:database
+description: Nuxt provides useState composable to create a reactive and SSR-friendly shared state.
+---
+
 # State Management

-Nuxt provides `useState` composable to create a reactive and SSR-friendly shared state across components.
+Nuxt provides useState composable to create a reactive and SSR-friendly shared state across components.

 `useState` is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.

--- a/docs/content/1.getting-started/8.error-handling.md
+++ b/docs/content/1.getting-started/8.error-handling.md
@ -1,4 +1,10 @@
-# Error Handling
+---
+navigation.icon: uil:bug
+---
+
+# Error handling
+
+Learn how to catch errors in different lifecycle.

 ## Handling Errors

--- a/docs/content/1.getting-started/9.testing.md
+++ b/docs/content/1.getting-started/9.testing.md
@ -1,5 +1,11 @@
+---
+navigation.icon: uil:check-circle
+---
+
 # Testing

+How to test your Nuxt application.
+
 ::alert{icon=👉}
 Test utils are still in development and the API and behavior may change. Currently, it is in preview stage but not yet ready for testing production apps.
 If you are a module author, you can find more specific informations in the [Module Author's guide](/guide/going-further/modules#testing)
--- a/docs/content/1.getting-started/_dir.yml
+++ b/docs/content/1.getting-started/_dir.yml
@ -0,0 +1 @@
+title: Get Started
--- a/docs/content/1.getting-started/index.md
+++ b/docs/content/1.getting-started/index.md
@ -1,6 +0,0 @@
---
-title: Get Started
-layout.aside: true
-navigation.exclusive: true
-navigation.redirect: /getting-started/introduction
---
--- a/docs/content/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/content/2.guide/1.concepts/1.auto-imports.md
@ -1,4 +1,8 @@
-# Auto Imports
+---
+description: "Nuxt auto-imports helper functions, composables and Vue APIs."
+---
+
+# Auto imports

 Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own components, composables and plugins. Components, composables or plugins can use these functions.

--- a/docs/content/2.guide/1.concepts/2.vuejs-development.md
+++ b/docs/content/2.guide/1.concepts/2.vuejs-development.md
@ -1,9 +1,11 @@
+---
+description: "Nuxt uses Vue and adds features such as component auto-imports and file-based routing."
+---
+
 # Vue.js Development

 Nuxt uses Vue as a frontend framework and adds features such as component auto-imports and file-based routing. Nuxt 3 integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.

-## Vue.js
-
 > While an in-depth knowledge of Vue is not required to use Nuxt, we recommend that you read the documentation and go through some of the examples on [vuejs.org](https://vuejs.org/).
 >

--- a/docs/content/2.guide/1.concepts/3.rendering.md
+++ b/docs/content/2.guide/1.concepts/3.rendering.md
@ -1,3 +1,7 @@
+---
+description: "Nuxt supports different rendering modes. Each one has pros and cons covered in this section."
+---
+
 # Rendering Modes

 Both the browser and server can interpret JavaScript code to render Vue.js components into HTML elements. This step is called **rendering**. Nuxt supports both **client-side** and **universal** rendering. The two approaches have pros and cons that we will cover in this section.
@ -6,8 +10,8 @@ Both the browser and server can interpret JavaScript code to render Vue.js compo

 Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface.

-![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/light/csr.svg){.dark:hidden}
-![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/dark/csr.svg){.light:hidden}
+![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/light/csr.svg){.light-img}
+![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/dark/csr.svg){.dark-img}

 While this technique allows building complex and dynamic UIs with smooth page transitions, it has different pros and cons:

@ -36,8 +40,8 @@ Making a static page interactive in the browser is called "Hydration."

 Universal rendering allows a Nuxt application to provide quick page load times while preserving the benefits of client-side rendering. Furthermore, as the content is already present in the HTML document, crawlers can index it without overhead.

-![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/img/concepts/rendering/light/ssr.svg){.dark:hidden}
-![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/img/concepts/rendering/dark/ssr.svg){.light:hidden}
+![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/img/concepts/rendering/light/ssr.svg){.light-img}
+![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/img/concepts/rendering/dark/ssr.svg){.dark-img}

 ### Pros

--- a/docs/content/2.guide/1.concepts/5.modules.md
+++ b/docs/content/2.guide/1.concepts/5.modules.md
@ -1,3 +1,7 @@
+---
+description: "Nuxt provides a module system to extend the framework core and simplify integrations."
+---
+
 # Modules

 Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using [`nuxt.config`](/api/configuration/nuxt.config#modules).
--- a/docs/content/2.guide/1.concepts/7.esm.md
+++ b/docs/content/2.guide/1.concepts/7.esm.md
@ -1,6 +1,8 @@
-# ES Modules
+---
+description: "Nuxt 3 (and Bridge) uses Native ES Modules."
+---

-Nuxt 3 (and Bridge) uses Native ES Modules.
+# ES Modules

 This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM.

--- a/docs/content/2.guide/1.concepts/8.typescript.md
+++ b/docs/content/2.guide/1.concepts/8.typescript.md
@ -1,3 +1,7 @@
+---
+description: "Nuxt 3 is fully typed and provides accurate type information when you are coding."
+---
+
 # TypeScript

 Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding.
--- a/docs/content/2.guide/1.concepts/_dir.yml
+++ b/docs/content/2.guide/1.concepts/_dir.yml
@ -0,0 +1,3 @@
+title: Key Concepts
+titleTemplate: '%s · Nuxt Concepts'
+navigation.icon: uil:award-alt
--- a/docs/content/2.guide/1.concepts/index.md
+++ b/docs/content/2.guide/1.concepts/index.md
@ -1,7 +1,4 @@
 ---
-title: Key Concepts
-layout.aside: true
-layout.asideClass: ''
-navigation.redirect: /guide/concepts/auto-imports
-# navigation.collapse: true
+navigation: false
+redirect: /guide/concepts/auto-imports
 ---
--- a/docs/content/2.guide/2.directory-structure/0.nuxt.md
+++ b/docs/content/2.guide/2.directory-structure/0.nuxt.md
@ -1,11 +1,11 @@
 ---
-icon: IconDirectory
-title: '.nuxt'
-head.title: Nuxt Directory
+navigation.icon: IconDirectory
+title: ".nuxt"
+description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
+head.title: ".nuxt"
 ---

-
-# Nuxt Directory
+# .nuxt Directory

 Nuxt uses the `.nuxt/` directory in development to generate your Vue application.

--- a/docs/content/2.guide/2.directory-structure/0.output.md
+++ b/docs/content/2.guide/2.directory-structure/0.output.md
@ -1,7 +1,8 @@
 ---
-icon: IconDirectory
-title: '.output'
-head.title: Output Directory
+navigation.icon: IconDirectory
+title: ".output"
+description: "Nuxt creates the .output/ directory when building your application for production."
+head.title: ".output"
 ---

 # Output Directory
--- a/docs/content/2.guide/2.directory-structure/1.assets.md
+++ b/docs/content/2.guide/2.directory-structure/1.assets.md
@ -1,7 +1,8 @@
 ---
-icon: IconDirectory
-title: 'assets'
-head.title: Assets Directory
+navigation.icon: IconDirectory
+title: "assets"
+description: "The assets/ directory is used to add all the website's assets that the build tool will process."
+head.title: "Assets"
 ---

 # Assets Directory
--- a/docs/content/2.guide/2.directory-structure/1.components.md
+++ b/docs/content/2.guide/2.directory-structure/1.components.md
@ -1,7 +1,8 @@
 ---
-icon: IconDirectory
-title: 'components'
-head.title: Components Directory
+navigation.icon: IconDirectory
+title: "components"
+description: "The components/ directory is where you put all your Vue components."
+head.title: "Components"
 ---

 # Components Directory
--- a/docs/content/2.guide/2.directory-structure/1.composables.md
+++ b/docs/content/2.guide/2.directory-structure/1.composables.md
@ -1,12 +1,13 @@
 ---
-icon: IconDirectory
+navigation.icon: IconDirectory
 title: 'composables'
-head.title: Composables Directory
+head.title: Composables
+description: Use the composables/ directory to auto-import your Vue composables into your application.
 ---

 # Composables Directory

-Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!
+Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!

 Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.

--- a/docs/content/2.guide/2.directory-structure/1.content.md
+++ b/docs/content/2.guide/2.directory-structure/1.content.md
@ -1,7 +1,8 @@
 ---
-icon: IconDirectory
+navigation.icon: IconDirectory
 title: 'content'
-head.title: Content Directory
+head.title: Content
+description: The Content module reads the content/ directory to create a file-based CMS for your application.
 ---

 # Content Directory
--- a/Show More
+++ b/Show More