arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(app): improve framework hydration (#2780)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2024-11-26 18:23:26 +01:00
committed by GitHub
parent 15ca2f5701
commit e7995e7a0b
7 changed files with 78 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/app/components/content/ComponentTheme.vue
View File

@@ -56,16 +56,18 @@ const component = computed(() => {
}
})
const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
const md = `
::code-collapse
${framework.value === 'nuxt'
? `
::code-collapse{class="nuxt-only"}
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
`
: `
::
::code-collapse{class="vue-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
@@ -81,7 +83,7 @@ export default defineConfig({
]
})
\`\`\`
`}
::
${strippedCompoundVariants.value

9
docs/app/components/content/FrameworkOnly.vue
View File

@@ -1,7 +1,12 @@
<script setup lang="ts">
const { framework } = useSharedData()
import { Slot } from 'radix-vue'
</script>
<template>
<slot :name="framework" />
<Slot class="nuxt-only">
<slot name="nuxt" />
</Slot>
<Slot class="vue-only">
<slot name="vue" />
</Slot>
</template>

16
docs/app/components/content/IconsTheme.vue
View File

@@ -4,11 +4,10 @@ import icons from '../../../../src/theme/icons'
const { framework } = useSharedData()
const { data: ast } = await useAsyncData(`icons-theme-${framework.value}`, async () => {
const { data: ast } = await useAsyncData(`icons-theme`, async () => {
const md = `
::code-collapse
${framework.value === 'nuxt'
? `
::code-collapse{class="nuxt-only"}
\`\`\`ts [app.config.ts]
export default defineAppConfig(${json5.stringify({
ui: {
@@ -16,8 +15,11 @@ export default defineAppConfig(${json5.stringify({
}
}, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
\`\`\`\
`
: `
::
::code-collapse{class="vue-only"}
\`\`\`ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
@@ -37,7 +39,7 @@ export default defineConfig({
]
})
\`\`\`
`}
::
`