feat/use nuxt mode

.eslintrc.js

@@ -3,14 +3,13 @@ module.exports = {
     node: true
   },
   extends: [
-    'eslint:recommended',
     'plugin:vue/vue3-recommended',
-    'prettier',
-    '@nuxtjs/eslint-config-typescript'
+    '@nuxtjs/eslint-config-typescript',
+    'prettier'
   ],
   rules: {
     // override/add rules settings here, such as:
     // 'vue/no-unused-vars': 'error'
     'vue/multi-word-component-names': 'off'
   }
-}
+};

.prettierrc.json

@@ -1,3 +1,6 @@
 {
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "always"
 }

components/content/CarbonAd.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { chakra, CBox, CFlex, useColorModeValue } from '@chakra-ui/vue-next'
-const bg = useColorModeValue('gray.50', 'rgba(36, 70, 93, 0.32)')
+import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
+const bg = useColorModeValue('gray.50', 'rgba(36, 70, 93, 0.32)');
 </script>
 
 <template>

components/content/CodeEditor.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import { VueLive } from 'vue-live'
-import * as Chakra from '@chakra-ui/vue-next'
-import CodeEditorLayout from './Editor/CodeEditorLayout.vue'
+import { VueLive } from 'vue-live';
+import * as Chakra from '@chakra-ui/vue-next';
+import CodeEditorLayout from './Editor/CodeEditorLayout.vue';
 // import "prismjs/themes/prism-twilight.min.css"
 
-defineProps<{ code: string }>()
+defineProps<{ code: string }>();
 </script>

components/content/Editor/CodeEditorParts.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, renderSlot, h } from "vue"
-import { BoxProps, chakra, CButton } from "@chakra-ui/vue-next"
+import { chakra, CButton } from "@chakra-ui/vue-next"
 
 export const CodeContainer = defineComponent({
   name: "CodeContainer",

components/content/prose/ProseA.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink>
+  <NuxtLink prefetch>
     <slot />
   </NuxtLink>
 </template>

components/content/prose/ProseBlockquote.vue

@@ -1,7 +1,3 @@
-<script setup>
-import { CAlert } from '@chakra-ui/c-alert'
-</script>
-
 <template>
   <CAlert
     mt="4"

components/content/prose/ProseCodeInline.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { CCode, useColorModeValue } from '@chakra-ui/vue-next'
+import { useColorModeValue } from '@chakra-ui/vue-next';
 
-const color = useColorModeValue('purple.500', 'purple.200')
+const color = useColorModeValue('purple.500', 'purple.200');
 </script>
 
 <template>

components/content/prose/ProseEm.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { chakra } from "@chakra-ui/vue-next";
+</script>
+
+<template>
+  <chakra.strong>
+    <slot />
+  </chakra.strong>
+</template>

components/content/prose/ProseH1.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-defineProps<{ id: string }>()
+import { chakra } from '@chakra-ui/vue-next';
+defineProps<{ id: string }>();
 </script>
 
 <template>

components/content/prose/ProseH2.vue

@@ -3,3 +3,7 @@
     <slot />
   </chakra.h2>
 </template>
+
+<script setup lang="ts">
+import { chakra } from '@chakra-ui/vue-next';
+</script>

components/content/prose/ProseH3.vue

@@ -3,3 +3,7 @@
     <slot />
   </chakra.h3>
 </template>
+
+<script setup lang="ts">
+import { chakra } from '@chakra-ui/vue-next';
+</script>

components/content/prose/ProseH4.vue

@@ -3,3 +3,7 @@
     <slot />
   </chakra.h4>
 </template>
+
+<script setup lang="ts">
+import { chakra } from '@chakra-ui/vue-next';
+</script>

components/content/prose/ProseH5.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { CHeading, CLink } from '@chakra-ui/vue-next'
-
-defineProps<{ id: string }>()
+defineProps<{ id: string }>();
 </script>
 
 <template>

components/content/prose/ProseLi.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import { CListItem } from '@chakra-ui/vue-next'
-</script>
-
 <template>
   <CListItem pb="4px" ml="12px">
     <slot />

components/content/prose/ProseOl.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import { COrderedList } from '@chakra-ui/vue-next'
-</script>
-
 <template>
   <COrderedList>
     <slot />

components/content/prose/ProseP.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import { CText } from '@chakra-ui/vue-next'
-</script>
-
 <template>
   <CText>
     <slot />

components/content/prose/ProseTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { chakra, CBox } from '@chakra-ui/vue-next'
+import { chakra } from '@chakra-ui/vue-next';
 </script>
 
 <template>

components/content/prose/ProseUl.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import { CUnorderedList } from '@chakra-ui/vue-next'
-</script>
-
 <template>
   <CUnorderedList>
     <slot />

components/home/DiscordHero.vue

@@ -24,7 +24,7 @@ import { chakra, CBox, CButton, CFlex, CIcon } from "@chakra-ui/vue-next";
     >
       <CIcon name="discord" size="48px" mr="5" />
       <CBox>
-        <chakra.h2 font-size="md" font-weight="bold" lineHeight="1.2" mb="1">
+        <chakra.h2 font-size="md" font-weight="bold" line-height="1.2" mb="1">
           Connect with the Chakra community
         </chakra.h2>
         <chakra.p>

components/home/StartHero.vue

@@ -24,7 +24,7 @@ const NuxtLink = resolveComponent("nuxt-link");
     :template-columns="{ base: '1fr', md: '1fr 1fr' }"
     pos="relative"
     bg="white"
-    :bgGradient="{ base: '', md: 'linear(to-br, white, white, emerald.100)' }"
+    :bg-gradient="{ base: '', md: 'linear(to-br, white, white, emerald.100)' }"
     :min-h="{
       base: 'calc(100vh - 78px)',
       sm: 'auto',
@@ -39,21 +39,21 @@ const NuxtLink = resolveComponent("nuxt-link");
         <chakra.div>
           <CHeading
             as="h1"
-            maxW="16ch"
-            :fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
-            fontFamily="heading"
-            letterSpacing="tighter"
-            fontWeight="extrabold"
-            lineHeight="1.2"
+            max-w="16ch"
+            :font-size="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
+            font-family="heading"
+            letter-spacing="tighter"
+            font-weight="extrabold"
+            line-height="1.2"
           >
             Build accessible Vue apps
             <chakra.span color="emerald.600" px="5px">with speed</chakra.span>
           </CHeading>
         </chakra.div>
         <CText
-          :maxW="{ base: '560px', lg: '650px' }"
+          :max-w="{ base: '560px', lg: '650px' }"
           opacity="0.7"
-          :fontSize="{ base: 'lg', lg: 'xl' }"
+          :font-size="{ base: 'lg', lg: 'xl' }"
         >
           Chakra UI Vue Next is a simple modular and accessible component
           library that gives you the building blocks to build Vue applications

components/navigation/doc-link.vue

@@ -1,6 +1,6 @@
 <template>
   <chakra.li>
-    <nuxt-link :to="props.navItemPath">
+    <nuxt-link prefetch :to="props.navItemPath">
       <chakra.a
         :aria-current="isCurrent ? 'page' : undefined"
         text-style="sidebarLink"
@@ -17,15 +17,15 @@
             left: 0,
             backgroundColor: 'currentColor',
             transformOrigin: 'bottom right',
-            transition: 'transform .4s cubic-bezier(.86, 0, .07, 1)',
+            transition: 'transform .4s cubic-bezier(.86, 0, .07, 1)'
           },
           '&:hover::after': {
             transform: 'scaleX(1)',
-            transformOrigin: 'bottom left',
-          },
+            transformOrigin: 'bottom left'
+          }
         }"
         :_hover="{
-          textDecoration: 'none',
+          textDecoration: 'none'
         }"
       >
         <slot />
@@ -35,14 +35,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
-import { computed } from 'vue'
-import { chakra } from '@chakra-ui/vue-next'
+import type { NavItem } from '@nuxt/content/dist/runtime/types';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { chakra } from '@chakra-ui/vue-next';
 
 const props = defineProps<{
-  navItemPath: NavItem['_path']
-}>()
+  navItemPath: NavItem['_path'];
+}>();
 
-const route = useRoute()
-const isCurrent = computed(() => route.path === props.navItemPath)
+const route = useRoute();
+const isCurrent = computed(() => route.path === props.navItemPath);
 </script>

components/navigation/table-of-contents.vue

@@ -55,7 +55,12 @@
             textDecoration: 'none',
           }"
         >
-          <nuxt-link v-slot="{ href, navigate }" :to="`#${item.id}`" custom>
+          <nuxt-link
+            v-slot="{ href, navigate }"
+            prefetch
+            :to="`#${item.id}`"
+            custom
+          >
             <chakra.a
               :href="href"
               :_hover="{
@@ -98,7 +103,12 @@
               }"
               pl="4"
             >
-              <nuxt-link v-slot="{ href, navigate }" :to="`#${item.id}`" custom>
+              <nuxt-link
+                v-slot="{ href, navigate }"
+                prefetch
+                :to="`#${item.id}`"
+                custom
+              >
                 <chakra.a
                   :href="href"
                   :_hover="{
@@ -118,11 +128,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { chakra, CStack } from '@chakra-ui/vue-next'
-import { useContent } from '#imports'
+import { computed } from "vue";
+import { chakra, CStack } from "@chakra-ui/vue-next";
+import { useContent } from "#imports";
 
-const content = useContent()
+const content = useContent();
 
-const links = computed(() => content.toc.links)
+const links = computed(() => content.toc.links);
 </script>

dist

@@ -1 +1 @@
-/Users/carwack/Documents/code/chakra-ui/vue-docs/.output/public
+/Users/jonasrct/Github/chakra/docs-site-vue/.output/public

layouts/default.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { chakra, CHStack, CIcon } from '@chakra-ui/vue-next'
-import { useColorModeValue } from '@chakra-ui/c-color-mode'
-import TopNavigation from '~/components/navigation/top-navigation.vue'
-import Sidebar from '~/components/navigation/sidebar.vue'
-import TableOfContents from '~/components/navigation/table-of-contents.vue'
+import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
+import TopNavigation from '~/components/navigation/top-navigation.vue';
+import Sidebar from '~/components/navigation/sidebar.vue';
 
 /**
  * Styling
  */
-const color = useColorModeValue('gray.700', 'white')
-const bg = useColorModeValue('white', 'gray.800')
-const colorModeClass = useColorModeValue(undefined, 'chakra-ui-dark')
+const color = useColorModeValue('gray.700', 'white');
+const bg = useColorModeValue('white', 'gray.800');
+const colorModeClass = useColorModeValue(undefined, 'chakra-ui-dark');
 </script>
 
 <template>
@@ -55,7 +53,7 @@ const colorModeClass = useColorModeValue(undefined, 'chakra-ui-dark')
             <p>Edit this page on GitHub</p>
           </c-h-stack>
         </chakra.div>
-        <table-of-contents />
+        <!-- <table-of-contents /> -->
       </chakra.main>
     </chakra.div>
   </chakra.div>

layouts/home.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { chakra } from '@chakra-ui/vue-next'
-import { useColorModeValue } from '@chakra-ui/c-color-mode'
-import TheNavbar from '../components/TheNavbar.vue'
+import { chakra, useColorModeValue } from '@chakra-ui/vue-next';
+import TheNavbar from '../components/TheNavbar.vue';
 
-const bg = useColorModeValue('white', 'gray.800')
-const color = useColorModeValue('gray.700', 'whiteAlpha.900')
+const bg = useColorModeValue('white', 'gray.800');
+const color = useColorModeValue('gray.700', 'whiteAlpha.900');
 </script>
 
 <template>