first commit
This commit is contained in:
41
docs/app/app.config.ts
Normal file
41
docs/app/app.config.ts
Normal file
@ -0,0 +1,41 @@
|
||||
export default defineAppConfig({
|
||||
socials: {
|
||||
x: 'https://x.com/nuxt_js',
|
||||
discord: 'https://discord.com/invite/ps2h6QT',
|
||||
nuxt: 'https://nuxt.com',
|
||||
},
|
||||
github: {
|
||||
rootDir: 'docs',
|
||||
},
|
||||
toc: {
|
||||
bottom: {
|
||||
title: 'Community',
|
||||
links: [{
|
||||
icon: 'i-lucide-book-open',
|
||||
label: 'Nuxt UI Pro docs',
|
||||
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
|
||||
target: '_blank',
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-credit-card',
|
||||
label: 'Purchase a license',
|
||||
to: 'https://ui.nuxt.com/pro/purchase',
|
||||
target: '_blank',
|
||||
}],
|
||||
},
|
||||
},
|
||||
uiPro: {
|
||||
pageHero: {
|
||||
slots: {
|
||||
title: 'font-semibold sm:text-6xl',
|
||||
container: '!pb-0',
|
||||
},
|
||||
},
|
||||
pageCard: {
|
||||
slots: {
|
||||
container: 'lg:flex min-w-0',
|
||||
wrapper: 'flex-none',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
14
docs/app/assets/css/main.css
Normal file
14
docs/app/assets/css/main.css
Normal file
@ -0,0 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@source "../../../content/**/*";
|
||||
@source "../../../../app/app/app.config.ts";
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
--container-8xl: 90rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ui-container: var(--container-8xl);
|
||||
}
|
||||
11
docs/app/components/AppHeaderCTA.vue
Normal file
11
docs/app/components/AppHeaderCTA.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<UButton
|
||||
v-if="$route.path == '/'"
|
||||
to="/getting-started/installation"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
class="hidden lg:inline-flex"
|
||||
>
|
||||
Get Started
|
||||
</UButton>
|
||||
</template>
|
||||
90
docs/app/components/AppHeaderLogo.vue
Normal file
90
docs/app/components/AppHeaderLogo.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
white?: boolean
|
||||
}>()
|
||||
|
||||
const isBlinking = ref(false)
|
||||
const isHovering = ref(false)
|
||||
const isTouchDevice = ref(false)
|
||||
let cleanup: (() => void) | undefined
|
||||
|
||||
const color = computed(() => props.white ? 'text-white' : 'text-black dark:text-white')
|
||||
|
||||
function setupBlinking() {
|
||||
const blinkDelay = Math.random() * 5000 + 2000
|
||||
|
||||
const timerId = setTimeout(() => {
|
||||
isBlinking.value = true
|
||||
|
||||
const blinkTimerId = setTimeout(() => {
|
||||
isBlinking.value = false
|
||||
setupBlinking()
|
||||
}, 200)
|
||||
|
||||
return () => clearTimeout(blinkTimerId)
|
||||
}, blinkDelay)
|
||||
|
||||
return () => clearTimeout(timerId)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
cleanup = setupBlinking()
|
||||
isTouchDevice.value = 'ontouchstart' in window
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup?.()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 139 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:class="color"
|
||||
alt="Docus logo"
|
||||
@mouseenter="isHovering = true"
|
||||
@mouseleave="isHovering = false"
|
||||
>
|
||||
<path
|
||||
v-if="isBlinking || (isHovering && !isTouchDevice)"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 16.0501C26.697 16.0501 28.2332 17.8658 28.2332 15.9708C28.2332 15.9708 26.697 15 24.802 15C22.907 15 21.3708 15.9708 21.3708 15.9708C21.3708 17.8658 22.907 16.0501 24.802 16.0501ZM14.6182 16.0501C16.5133 16.0501 18.0494 17.866 18.0494 15.971C18.0494 15.971 16.395 15 14.5 15C12.605 15 11.1871 15.971 11.1871 15.971C11.1871 17.866 12.7233 16.0501 14.6182 16.0501Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
|
||||
<path
|
||||
v-else
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 19.402C26.697 19.402 28.2332 17.8658 28.2332 15.9708C28.2332 14.0758 26.697 12.5396 24.802 12.5396C22.907 12.5396 21.3708 14.0758 21.3708 15.9708C21.3708 17.8658 22.907 19.402 24.802 19.402ZM14.6182 19.4022C16.5133 19.4022 18.0494 17.866 18.0494 15.971C18.0494 14.076 16.5133 12.5398 14.6182 12.5398C12.7233 12.5398 11.1871 14.076 11.1871 15.971C11.1871 17.866 12.7233 19.4022 14.6182 19.4022Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M66.9254 19.7235C66.9254 21.3159 67.3047 22.7336 68.0589 23.983C68.8344 25.2345 69.9001 26.2128 71.2614 26.9192C72.6224 27.6255 74.1522 27.9808 75.8559 27.9808C77.58 27.9808 79.1197 27.6253 80.4803 26.9192C81.8415 26.2129 82.8968 25.2349 83.6521 23.9842C84.4068 22.7345 84.7864 21.3165 84.7864 19.7235C84.7864 18.1306 84.4068 16.7233 83.653 15.4945L83.6521 15.4931C82.8972 14.243 81.8427 13.2757 80.4828 12.5895L80.4803 12.5883C79.1197 11.8823 77.58 11.5267 75.8559 11.5267C74.1318 11.5267 72.5921 11.8823 71.2315 12.5883L71.2303 12.5889C69.8902 13.2748 68.8346 14.2426 68.0589 15.4943C67.3044 16.7442 66.9254 18.1519 66.9254 19.7235ZM78.487 22.7884L78.4893 22.7858C79.1787 22.025 79.5098 20.9944 79.5098 19.7235C79.5098 18.472 79.1782 17.4602 78.487 16.7192C77.7995 15.9821 76.9158 15.6155 75.8559 15.6155C74.796 15.6155 73.9122 15.9821 73.2248 16.7192C72.5336 17.4602 72.202 18.472 72.202 19.7235C72.202 20.9944 72.533 22.025 73.2224 22.7858L73.2248 22.7884C73.9122 23.5254 74.796 23.892 75.8559 23.892C76.9158 23.892 77.7995 23.5254 78.487 22.7884Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M102.777 23.9716C102.226 25.168 101.362 26.1218 100.178 26.8352C98.8826 27.5957 97.3382 27.9808 95.5355 27.9808C93.7706 27.9808 92.2006 27.6249 90.82 26.9186C89.4388 26.2119 88.3637 25.2336 87.5888 23.983C86.8345 22.7336 86.4553 21.3159 86.4553 19.7235C86.4553 18.1307 86.8347 16.7236 87.5884 15.495C88.363 14.2446 89.4374 13.2767 90.8176 12.5902L90.82 12.5889C92.2006 11.8826 93.7706 11.5267 95.5355 11.5267C97.3377 11.5267 98.8816 11.9217 100.177 12.7019L100.179 12.7032C101.362 13.3981 102.226 14.3415 102.777 15.536C102.812 15.6127 102.782 15.7129 102.692 15.7592L99.0173 17.6509C98.9272 17.6973 98.8018 17.6656 98.7381 17.559C97.9721 16.2774 96.8895 15.6155 95.5056 15.6155C94.4273 15.6155 93.5161 15.9808 92.7896 16.714L92.7871 16.7165C92.0745 17.4573 91.7318 18.4701 91.7318 19.7235C91.7318 20.9962 92.0739 22.0278 92.7847 22.7885L92.7871 22.7911L92.7896 22.7935C93.5162 23.5267 94.4273 23.892 95.5056 23.892C96.8895 23.892 97.9721 23.2301 98.7381 21.9485C98.8018 21.842 98.9272 21.8102 99.0173 21.8566L102.692 23.7483C102.782 23.7947 102.812 23.8948 102.777 23.9716Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M116.533 27.5185V25.5732L116.118 26.034C115.543 26.6721 114.853 27.1553 114.047 27.4846C113.238 27.8151 112.38 27.9808 111.471 27.9808C109.424 27.9808 107.811 27.3731 106.605 26.1761C105.427 24.9869 104.817 23.1837 104.817 20.7212V11.989C104.817 11.884 104.903 11.7988 105.008 11.7988H109.844C109.949 11.7988 110.034 11.884 110.034 11.989V19.784C110.034 21.0337 110.266 21.9976 110.777 22.6251C111.291 23.2566 112.035 23.5594 112.969 23.5594C113.93 23.5594 114.725 23.2222 115.333 22.5432C115.968 21.8368 116.263 20.7912 116.263 19.4514V11.989C116.263 11.884 116.348 11.7988 116.453 11.7988H121.29C121.395 11.7988 121.48 11.884 121.48 11.989V27.5185C121.48 27.6236 121.395 27.7087 121.29 27.7087H116.723C116.618 27.7087 116.533 27.6236 116.533 27.5185Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M133.19 22.3635C133.033 22.198 132.813 22.0836 132.552 22.0061C132.068 21.8373 131.311 21.6843 130.294 21.5434L130.291 21.543C129.001 21.3828 127.905 21.1732 127.001 20.9156C126.145 20.6659 125.403 20.2057 124.772 19.5307C124.166 18.8818 123.848 17.9594 123.848 16.7305C123.848 15.7331 124.141 14.8573 124.727 14.0941L124.729 14.0918C125.316 13.3081 126.176 12.6868 127.322 12.2358L127.324 12.235C128.488 11.7654 129.884 11.5267 131.52 11.5267C132.682 11.5267 133.834 11.6459 134.977 11.8845C135.957 12.0892 136.792 12.3657 137.485 12.7111C137.561 12.7486 137.599 12.8448 137.559 12.9371L136.195 16.0508C136.152 16.151 136.024 16.2007 135.913 16.145C134.558 15.4693 133.102 15.1318 131.55 15.1318C130.644 15.1318 129.937 15.2416 129.465 15.4899C129 15.7145 128.705 16.053 128.705 16.5188C128.705 16.762 128.779 16.9814 128.933 17.1638C129.084 17.3421 129.298 17.4701 129.553 17.5599L129.558 17.5614L129.562 17.5628C130.04 17.7094 130.814 17.8627 131.874 18.0241C133.206 18.2247 134.303 18.4545 135.167 18.7122C136.003 18.9613 136.725 19.4206 137.336 20.0951L137.338 20.0977L137.341 20.1003C137.945 20.7286 138.263 21.6295 138.263 22.8375C138.263 23.8133 137.97 24.6901 137.382 25.4752C136.797 26.2372 135.919 26.849 134.731 27.301L134.73 27.3015C133.566 27.7517 132.149 27.9808 130.471 27.9808C129.131 27.9808 127.811 27.8318 126.511 27.5337C125.374 27.2555 124.443 26.9114 123.712 26.505C123.641 26.4657 123.606 26.3729 123.645 26.2838L125.008 23.1475C125.053 23.0442 125.188 22.9929 125.304 23.056C125.966 23.4151 126.719 23.7105 127.561 23.9439L127.565 23.9449C128.602 24.2117 129.631 24.3455 130.651 24.3455C131.573 24.3455 132.269 24.2564 132.701 24.0502L132.706 24.0479C133.163 23.8172 133.436 23.4641 133.436 22.9887C133.436 22.7491 133.354 22.5358 133.19 22.3635Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M44.6799 7.02197H53.7408C56.0076 7.02197 58.0084 7.44945 59.7488 8.29791C61.4884 9.14597 62.8315 10.3455 63.7852 11.897C64.7377 13.4466 65.2181 15.2665 65.2181 17.3654C65.2181 19.4642 64.7377 21.2841 63.7852 22.8337C62.8315 24.3852 61.4884 25.5847 59.7488 26.4328C58.0084 27.2813 56.0076 27.7087 53.7408 27.7087H44.6799C44.3382 27.7087 44.0612 27.4318 44.0612 27.0901V7.64061C44.0612 7.29895 44.3382 7.02197 44.6799 7.02197ZM53.5011 23.4083C55.3462 23.4083 56.8475 22.8794 57.9792 21.8014C59.1352 20.7194 59.7018 19.2302 59.7018 17.3654C59.7018 15.5005 59.1352 14.0113 57.9792 12.9293C56.8475 11.8513 55.3462 11.3224 53.5011 11.3224H50.1841C49.816 11.3224 49.5175 11.6209 49.5175 11.989V22.7417C49.5175 23.1098 49.816 23.4083 50.1841 23.4083H53.5011Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
21
docs/app/components/content/BrowserFrame.vue
Normal file
21
docs/app/components/content/BrowserFrame.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-fit rounded-xl border border-muted bg-accented shadow-md overflow-hidden px-2 pb-2">
|
||||
<div class="flex justify-between items-center px-2 py-2 bg-accented border-accented border-b">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-red-500 rounded-full" />
|
||||
<span class="w-3 h-3 bg-yellow-500 rounded-full" />
|
||||
<span class="w-3 h-3 bg-green-500 rounded-full" />
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<slot mdc-unwrap="p" />
|
||||
</div>
|
||||
</template>
|
||||
33
docs/app/components/content/ColorModeSwitch.vue
Normal file
33
docs/app/components/content/ColorModeSwitch.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const isLight = computed({
|
||||
get() {
|
||||
return colorMode.value === 'light'
|
||||
},
|
||||
set(_isLight) {
|
||||
colorMode.preference = _isLight ? 'light' : 'dark'
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<USwitch
|
||||
v-model="isLight"
|
||||
unchecked-icon="i-lucide-moon"
|
||||
checked-icon="i-lucide-sun"
|
||||
aria-label="Toggle color mode"
|
||||
size="xl"
|
||||
color="neutral"
|
||||
:ui="{
|
||||
base: 'w-70 h-35 rounded-lg rotate-90 data-[state=checked]:bg-[var(--ui-color-neutral-200)]',
|
||||
thumb: 'data-[state=checked]:translate-x-35 data-[state=checked]:rtl:-translate-x-35 rounded-lg size-34',
|
||||
icon: 'rotate-270 size-8',
|
||||
}"
|
||||
@click="isDark = !isDark"
|
||||
/>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
14
docs/app/components/content/CommandSearch.vue
Normal file
14
docs/app/components/content/CommandSearch.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
const src = computed(() => `https://ui.nuxt.com/examples/content-search-example?primary=${appConfig.ui.colors?.primary}&neutral=${appConfig.ui.colors?.neutral}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<iframe
|
||||
:src="src"
|
||||
class="rounded-lg relative h-96 w-full"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
18
docs/app/components/content/FloatingNuxt.vue
Normal file
18
docs/app/components/content/FloatingNuxt.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="flex-1 flex items-center justify-center">
|
||||
<NuxtImg
|
||||
src="/landing/nuxt-logo-3D.svg"
|
||||
class="h-42 floating-logo"
|
||||
alt="Nuxt 3D Logo"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.floating-logo {
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.group:hover .floating-logo {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
</style>
|
||||
87
docs/app/components/content/NuxtImage.vue
Normal file
87
docs/app/components/content/NuxtImage.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="w-full flex items-center justify-center">
|
||||
<svg
|
||||
width="309"
|
||||
height="309"
|
||||
viewBox="0 0 309 309"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="309"
|
||||
height="309"
|
||||
rx="8"
|
||||
fill="url(#paint0_linear_549_2095)"
|
||||
fill-opacity="0.2"
|
||||
/>
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="308"
|
||||
height="308"
|
||||
rx="8"
|
||||
stroke="url(#paint1_linear_549_2095)"
|
||||
stroke-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M250.424 224.554C251.995 199.097 246.309 173.754 234.01 151.409C221.753 129.139 206.184 104.281 197.759 104.281C182.497 104.281 159.941 135.743 151.205 139.926C139.866 129.94 100.698 80.5 88.8565 80.5C77.0152 80.5 29.4718 153.81 20.6396 172.34C6.93039 201.102 2.09076 293.5 22.2949 293.5C35.8243 293.5 51.7545 293.459 69.0776 293.414C108.704 293.311 190.075 293.104 232.215 293.414C243.818 293.499 248.52 255.423 250.424 224.554Z"
|
||||
fill="url(#paint2_linear_549_2095)"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<path
|
||||
d="M241.47 38.3696C241.47 47.4864 234.079 54.877 224.963 54.877C215.846 54.877 208.455 47.4864 208.455 38.3696C208.455 29.2529 215.846 21.8623 224.963 21.8623C234.079 21.8623 241.47 29.2529 241.47 38.3696Z"
|
||||
fill="white"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_549_2095"
|
||||
x1="126.999"
|
||||
y1="48.1171"
|
||||
x2="132.171"
|
||||
y2="247.688"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
2
docs/content/1.getting-started/.navigation.yml
Normal file
2
docs/content/1.getting-started/.navigation.yml
Normal file
@ -0,0 +1,2 @@
|
||||
title: Getting Started
|
||||
icon: false
|
||||
54
docs/content/1.getting-started/2.introduction.md
Normal file
54
docs/content/1.getting-started/2.introduction.md
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Welcome to Docus theme documentation.
|
||||
navigation:
|
||||
icon: i-lucide-house
|
||||
seo:
|
||||
title: Introduction
|
||||
description: Discover how to create, manage, and publish documentation
|
||||
effortlessly with Docus.
|
||||
---
|
||||
|
||||
Welcome to **Docus**, a fully integrated documentation solution built with [Nuxt UI Pro](https://ui.nuxt.com/pro).
|
||||
|
||||
## What is Docus?
|
||||
|
||||
Docus is a theme based on the [UI Pro documentation template](https://docs-template.nuxt.dev/). While the visual style comes ready out of the box, your focus should be on writing content using the Markdown and [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by [Nuxt Content](https://content.nuxt.com).
|
||||
|
||||
We use this theme across all our Nuxt module documentations, including:
|
||||
|
||||
::card-group
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-nuxtdotjs
|
||||
target: _blank
|
||||
title: Nuxt Image
|
||||
to: https://image.nuxt.com
|
||||
---
|
||||
The documentation of `@nuxt/image`
|
||||
:::
|
||||
|
||||
:::card
|
||||
---
|
||||
icon: i-simple-icons-nuxtdotjs
|
||||
target: _blank
|
||||
title: Nuxt Supabase
|
||||
to: https://supabase.nuxtjs.org
|
||||
---
|
||||
The documentation of `@nuxt/supabase`
|
||||
:::
|
||||
::
|
||||
|
||||
## Key Features
|
||||
|
||||
This theme includes a range of features designed to improve documentation management:
|
||||
|
||||
- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
|
||||
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
|
||||
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
|
||||
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Write and edit your content visually. No Markdown knowledge is required!
|
||||
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
|
||||
- **Full-Text Search**: Includes built-in search functionality for content discovery.
|
||||
- **Optimized Typography**: Features refined typography for enhanced readability.
|
||||
- **Dark Mode**: Offers dark mode support for user preference.
|
||||
- **Extensive Functionality**: Explore the theme to fully appreciate its capabilities.
|
||||
65
docs/content/1.getting-started/3.installation.md
Normal file
65
docs/content/1.getting-started/3.installation.md
Normal file
@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Installation
|
||||
description: Get started with Docus.
|
||||
navigation:
|
||||
icon: i-lucide-download
|
||||
seo:
|
||||
description: Get started with Docus documentation theme.
|
||||
---
|
||||
|
||||
## Local development
|
||||
|
||||
::steps
|
||||
### Create your docs directory
|
||||
|
||||
Use the `docus` CLI to create a new Docus project in the `docs/` directory:
|
||||
|
||||
```bash [Terminal]
|
||||
npx docus init docs
|
||||
```
|
||||
|
||||
We recommend using the `npm` package manager.
|
||||
|
||||
### Start your docs server in development
|
||||
|
||||
Move to the `docs/` directory and start your docs server in development mode:
|
||||
|
||||
```bash [Terminal]
|
||||
npm run dev
|
||||
```
|
||||
|
||||
A local preview of your documentation will be available at <http://localhost:4000>
|
||||
|
||||
### Write your documentation
|
||||
|
||||
Head over the [Edition](/concepts/edition) section to learn how to write your documentation.
|
||||
::
|
||||
|
||||
## Online Edition with [Nuxt Studio](https://content.nuxt.com/studio)
|
||||
|
||||
::prose-steps
|
||||
### Create a new project on [Nuxt Studio](https://nuxt.studio)
|
||||
|
||||
From your user or team dashboard, click the `New project` button then choose `Start from a template` and select **Docus.** Clone it on your GitHub personal account or any organisation of your choice.
|
||||
|
||||
### Deploy in one click
|
||||
|
||||
Once your project has been created and you're in the project dashboard, navigate to the `Deploy` section, choose the `GitHub Pages` tab and set your [Nuxt UI Pro license](https://ui.nuxt.com/pro/pricing) (`NUXT_UI_PRO_LICENSE` ) in the environment variables then click on the **Deploy** button.
|
||||
|
||||
:::prose-note
|
||||
---
|
||||
to: https://content.nuxt.com/docs/studio/setup#enable-the-full-editing-experience
|
||||
---
|
||||
This is a one click static deployment available with [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) but you can also handle deployment yourself and use the `Selfhosted` tab.
|
||||
:::
|
||||
|
||||
### Write your documentation in the editor
|
||||
|
||||
Once the deployment is achieved, you'll be able to display the preview of your documentation. You can browse your content pages to edit them or create new ones.
|
||||
|
||||
:video{controls loop poster="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.jpg" src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
|
||||
::
|
||||
|
||||
::prose-tip{to="https://content.nuxt.com/docs/studio/debug"}
|
||||
If you want to try Docus and Nuxt Studio in develoment mode without an UI Pro license, you can check the Nuxt Content documentation for local setup with Nuxt Studio.
|
||||
::
|
||||
52
docs/content/1.getting-started/4.project-structure.md
Normal file
52
docs/content/1.getting-started/4.project-structure.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-folder-tree
|
||||
title: Project Structure
|
||||
---
|
||||
|
||||
Docus provides a ready-to-use [documentation website starter](https://github.com/nuxtlabs/docus/tree/main/.starter).
|
||||
|
||||
This is the minimal directory structure to get an up and running Docus website.
|
||||
|
||||
```bash
|
||||
content/
|
||||
index.md
|
||||
public/
|
||||
favicon.ico
|
||||
package.json
|
||||
```
|
||||
|
||||
### `content/` directory
|
||||
|
||||
This is where you [write pages](/concepts/edition) in Markdown.
|
||||
|
||||
### `public/` directory
|
||||
|
||||
Files contained within the `public/` directory are served at the root and are not modified by the build process of your documentation. This is where you can locate your medias.
|
||||
|
||||
### `package.json`
|
||||
|
||||
This file contains all the dependencies and scripts for your application. The `package.json` of a Docus application si really minimal and looks like:
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "docus-starter",
|
||||
"scripts": {
|
||||
"dev": "docus dev",
|
||||
"build": "docus build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docus": "latest"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### `app.config.ts`
|
||||
|
||||
*This file is not mandatory to start a Docus application.*
|
||||
|
||||
This is where you can [configure Docus](/concepts/configuration) to fit your branding, handle SEO and adapt links and socials.
|
||||
|
||||
::prose-tip{to="/concepts/nuxt"}
|
||||
Docus uses a layer system, you can go further and use any feature or file of a classical Nuxt project from `nuxt.config.ts` to `app/components` or `server/` directory.
|
||||
::
|
||||
129
docs/content/1.getting-started/5.studio.md
Normal file
129
docs/content/1.getting-started/5.studio.md
Normal file
@ -0,0 +1,129 @@
|
||||
---
|
||||
title: Web Editor
|
||||
description: Build your documentation using Nuxt Studio web editor
|
||||
navigation:
|
||||
icon: i-lucide-mouse-pointer-2
|
||||
---
|
||||
|
||||
## **Introduction**
|
||||
|
||||
The [Nuxt Studio](https://nuxt.studio) **web editor** is a browser-based visual interface for creating, editing, and reviewing your documentation. It provides a preview experience while keeping your work in sync with your Git repository.
|
||||
|
||||
:video{controls loop src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
|
||||
|
||||
::prose-tip{to="https://content.nuxt.com/studio"}
|
||||
Learn more about Nuxt Studio in the Nuxt Content documentation.
|
||||
::
|
||||
|
||||
## **Web Editor vs. CLI**
|
||||
|
||||
The **web editor** of [Nuxt Studio](https://nuxt.studio) allows you to manage your documentation entirely from your browser. There is no need for local development tools or terminal commands. It’s ideal for maintaining your docs in one centralised place, with an easy tool without any Markdown skills required.
|
||||
|
||||
The **CLI (Command Line Interface)**, on the other hand, is a local tool designed for developers who prefer working in their own IDE.
|
||||
|
||||
::prose-note
|
||||
Both tools are fully integrated with Git, so you can switch between them as needed. Team members can choose whichever method suits their workflow best.
|
||||
::
|
||||
|
||||
## **Two distinct editors**
|
||||
|
||||
Nuxt Studio offers a versatile workspace for both developers and content writers, giving them the freedom to choose between two distinct editors for content creation and management: the **Markdown editor** and the **Visual editor**.
|
||||
|
||||
You can select your favorite editor from the settings page of your project.
|
||||
|
||||
::prose-note
|
||||
Each editor serves its own purpose, some users are used to Markdown edition, while others prefer a non-technical, visual approach. At the end, **Markdown syntax is the final output** for both editors.
|
||||
::
|
||||
|
||||
## **Markdown editor**
|
||||
|
||||
|
||||
|
||||
The Markdown editor in Nuxt Studio provides full control over your content, allowing you to write directly you documentation in **Markdown** and integrate Vue components with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
When your file is saved with the Markdown editor, the content is stored exactly as you've written it, preserving all specific syntax and formatting. This editor is ideal for users comfortable with Markdown who want precise control over the layout and structure of their content.
|
||||
|
||||
## **Visual editor**
|
||||
|
||||
|
||||
|
||||
The Nuxt Studio editor is heavily inspired by Notion, well known for its intuitive design and flexibility. Much like a standard text editor, the Studio editor is designed to be familiar and easy to use.
|
||||
|
||||
However, it stands out with its additional features that improve the writing experience:
|
||||
|
||||
### **Toolbar**
|
||||
|
||||
Highlight your text to reveal the toolbar, giving you access to all the standard text editing features provided by the [Markdown syntax](/essentials/markdown-syntax):
|
||||
|
||||
- Title formatting
|
||||
- Bold
|
||||
- Italic
|
||||
- Strike-through
|
||||
- Code
|
||||
- Link
|
||||
- Class
|
||||
- Bullet list
|
||||
- Numerated list
|
||||
|
||||
### **The** `/` **shortcut**
|
||||
|
||||
Simply type `/` anywhere in the editor to access all Studio features.
|
||||
|
||||
#### **Formatting features**
|
||||
|
||||
- Title formatting
|
||||
- Line break
|
||||
- Horizontal rule
|
||||
- Code-block
|
||||
- Paragraph
|
||||
- Bold & italic
|
||||
|
||||
#### **Components**
|
||||
|
||||
One of Studio's standout features is its ability to integrate and customize any complex component directly within the editor.
|
||||
|
||||
In other terms, all [Nuxt UI components](/essentials/components) are usable and can be integrated directly from the editor. An editor can also tweak the component properties, slots and styles.
|
||||
|
||||
::prose-note
|
||||
You can also create custom components and let the user integrate them from the visual editor.
|
||||
::
|
||||
|
||||
Just type `/` to access the list of all the components available.
|
||||
|
||||
#### **Images**
|
||||
|
||||
Using the `/`shortcut, you can quickly insert an image by selecting the `Image` option. A modal will open to let you choose the media you want to insert.
|
||||
|
||||
From the media modal, you can set the **alt attribute** for SEO and accessibility purpose.
|
||||
|
||||
#### **Videos**
|
||||
|
||||
Using the `/` shortcut, you can quickly insert a video by selecting the `Video` choice and filling up the Video URL.
|
||||
|
||||
As soon as a video is added, a tab will automatically open with all the props field **available by default**, for you to fill out the URL and customize your media.
|
||||
|
||||
## **Live Preview**
|
||||
|
||||
|
||||
|
||||
Once your documentation is deployed, it provides a live preview feature that lets you instantly see updates to your project.
|
||||
|
||||
We're using your production website to override contents and display the new visual. This is why we need the URL to be set in the **deploy** section.
|
||||
|
||||
When you are editing your website with Studio, the live preview can be displayed on the right part of your screen. You get an instant feedback when typing. It syncs the preview based on your draft updates.
|
||||
|
||||
## **Making Changes**
|
||||
|
||||
To edit your documentation:
|
||||
|
||||
1. **Browse files** using the file explorer.
|
||||
2. **Open a file** by clicking on it.
|
||||
3. **Edit content** in either visual or Markdown mode. All edits are automatically saved as drafts.
|
||||
4. **Preview your changes** to see how they’ll appear when published.
|
||||
|
||||
## **Publishing Changes**
|
||||
|
||||
When you’re ready to publish:
|
||||
|
||||
- Click the **Publish** button in the top-right corner of the editor.
|
||||
- Your changes will be pushed directly to your deployment branch and go live immediately.
|
||||
24
docs/content/1.getting-started/6.migration.md
Normal file
24
docs/content/1.getting-started/6.migration.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Migration
|
||||
description: " How to migrate your documentation from an existing Markdown
|
||||
solution to Docus"
|
||||
navigation:
|
||||
icon: i-lucide-replace
|
||||
---
|
||||
|
||||
## **Migrating to Docus**
|
||||
|
||||
Already using a Markdown-based solution for your documentation? Whether it’s **Docus v1**, the **Nuxt UI Pro docs template**, or another static site setup, migrating to Docus is simple and straightforward.
|
||||
|
||||
Docus offers a clean and maintainable solution with a single dependency: the Docus library itself. There’s no need to manage multiple .dependencies With everything built-in and maintained together, keeping your documentation up to date is easier than ever.
|
||||
|
||||
To migrate, just move your existing Markdown files into the `content/` directory of the Docus starter.
|
||||
|
||||
From there, you have two scenarios:
|
||||
|
||||
- **If your current docs already use Nuxt Content and the MDC syntax**, make sure the components used in your content exist in Nuxt UI. If any components are missing, you can easily create your own custom ones.
|
||||
- **If you’re using standard Markdown**, you can copy your files as is. Then, enhance your documentation progressively using the [built-in components](/essentials/components) provided by Nuxt UI.
|
||||
|
||||
Once your content has been moved to the `content/` folder, you can go through the [configuration section](/concepts/configuration) to easily customize your app.
|
||||
|
||||
Docus is designed to focus on writing content, so if you're already using Markdown, you can easily switch to it.
|
||||
1
docs/content/2.concepts/.navigation.yml
Normal file
1
docs/content/2.concepts/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Core Concepts
|
||||
123
docs/content/2.concepts/2.edition.md
Normal file
123
docs/content/2.concepts/2.edition.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Edition
|
||||
description: Learn how to write your documentation.
|
||||
navigation:
|
||||
icon: i-lucide-pencil
|
||||
seo:
|
||||
description: Learn how to write your documentation with Docus and Nuxt Content.
|
||||
---
|
||||
|
||||
Docus lets you write all your content in **Markdown** but also provide the ability to integrate **components** with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by **Nuxt Content**.
|
||||
|
||||
## Landing page
|
||||
|
||||
The landing corresponds to the `index.md` file. `MDC` syntax supercharges Markdown with the ability to use Vue components including slots and props inside your `.md` files.
|
||||
|
||||
::prose-tip{to="/essentials/components"}
|
||||
Check the list of Nuxt UI prose components you can integrate in your Markdown.
|
||||
::
|
||||
|
||||
### Components
|
||||
|
||||
MDC provides a dedicated syntax to easily use Vue components in your content:
|
||||
|
||||
```mdc [content/index.md]
|
||||
:::u-page-feature
|
||||
:::
|
||||
```
|
||||
|
||||
### Slots
|
||||
|
||||
Slots can receive text content or other components.
|
||||
|
||||
- **Default slot** is rendered directly inside the component or with `#default`.
|
||||
- **Named slots** are defined using the `#` symbol followed by the slot name.
|
||||
|
||||
```mdc [index.md]
|
||||
:::u-page-feature
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
Props are passed using inline syntax or YAML frontmatter within the component block:
|
||||
|
||||
::prose-tabs
|
||||
:::prose-tabs-item{icon="i-lucide-braces" label="Inline"}
|
||||
```mdc [index.md]
|
||||
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
:::
|
||||
|
||||
:::prose-tabs-item{icon="i-lucide-code" label="YAML"}
|
||||
```mdc [index.md]
|
||||
:::u-page-feature
|
||||
---
|
||||
icon: i-simple-icons-nuxt
|
||||
to: https://nuxt.com
|
||||
---
|
||||
#title
|
||||
Nuxt 3
|
||||
|
||||
#description
|
||||
Powered by Nuxt 3 for optimal performances and SEO.
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
::prose-note{to="https://content.nuxt.com"}
|
||||
Check the Nuxt Content documentation for more details about the MDC syntax
|
||||
::
|
||||
|
||||
## Documentation pages
|
||||
|
||||
::prose-tip
|
||||
There is a one to one relationship between content files and pages on your site. Each Markdown page in the `content/` folder maps directly to a page route.
|
||||
::
|
||||
|
||||
To get started, simply edit or add a `.md` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. Docus will handle routing, navigation, and full-text search automatically.
|
||||
|
||||
### Frontmatter
|
||||
|
||||
Every file of the `content/` folder starts with the `---` syntax on top of the page. It corresponds to the frontmatter of your file which is a convention of Markdown-based CMS to provide meta-data to pages.
|
||||
|
||||
::prose-tabs
|
||||
:::prose-tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```md [content/getting-started/edition.md]
|
||||
---
|
||||
title: 'Edition'
|
||||
description: 'Learn how to write your documentation.'
|
||||
---
|
||||
|
||||
<!-- Content of the page in pure Markdown -->
|
||||
```
|
||||
:::
|
||||
|
||||
:::prose-tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
{.rounded-lg}
|
||||
:::
|
||||
::
|
||||
|
||||
### Parameters
|
||||
|
||||
Pages in the `/content` directory are defined as [page](https://content.nuxt.com/docs/collections/types#page-type) type in Nuxt Content. They all follow the same structure with existing frontmatter keys:
|
||||
|
||||
| | | | |
|
||||
| ------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | - |
|
||||
| Key | Type | Description | |
|
||||
| `title` | `string` | Title of the page. Displayed on top of the page. Used as SEO title if `seo` key is not provided. | |
|
||||
| `description` | `string` | Description of the page. Displayed bellow the title on top of the page. Used as SEO description if `seo` key is not provided. | |
|
||||
| `navigation` | `boolean` | Define if the page is included in left aside navigation. | |
|
||||
| `seo` | `{ title: string, description: string }` | SEO metas of your page. | |
|
||||
191
docs/content/2.concepts/3.configuration.md
Normal file
191
docs/content/2.concepts/3.configuration.md
Normal file
@ -0,0 +1,191 @@
|
||||
---
|
||||
title: Configuration
|
||||
navigation:
|
||||
icon: i-lucide-settings
|
||||
description: "Customize your Docus documentation from the Nuxt application
|
||||
configuration file. "
|
||||
seo:
|
||||
description: Customize your Docus documentation from Nuxt application configuration file.
|
||||
---
|
||||
|
||||
Docus allows you to configure your documentation through the [app.config.ts](https://nuxt.com/docs/guide/directory-structure/app-config) file provided by Nuxt.
|
||||
|
||||
## SEO
|
||||
|
||||
Technical SEO is tricky and boring. Docus offers a solid, opt-in default setup that works out of the box, while giving you full control to customize your SEO metadata, from page titles to social sharing images.
|
||||
|
||||
### Metadata
|
||||
|
||||
Docus offers flexible `SEO` metadata configuration, allowing you to easily override values globally or on a per-page basis.
|
||||
|
||||
#### Global configuration
|
||||
|
||||
Define default `SEO` metas for your entire documentation in `app.config.ts`. These values will be used as fallbacks across pages that don’t specify their own in the front-matter as described in next section.
|
||||
|
||||
You can also configure your `site.name` value from your `nuxt.config.ts` file, default is based on your `package.json` name.
|
||||
|
||||
::prose-code-group
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
seo: {
|
||||
// Default to `%s - ${site.name}`
|
||||
titleTemplate: ''
|
||||
// Default to package.json name
|
||||
title: '',
|
||||
// Default to package.json description
|
||||
description: ''
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
site: {
|
||||
name: 'Docus',
|
||||
},
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
#### Per-page configuration
|
||||
|
||||
Each Markdown file in the `content/` directory starts with a frontmatter block (`---`). You can define `SEO` metadata per page by using the `seo` key:
|
||||
|
||||
```md [content/concepts/configuration.md]
|
||||
---
|
||||
seo:
|
||||
title: 'Configuration'
|
||||
description: 'Customize your Docus documentation from the Nuxt application configuration file.'
|
||||
---
|
||||
|
||||
<!-- Page content -->
|
||||
```
|
||||
|
||||
::prose-tip{to="/concepts/edition#frontmatter"}
|
||||
For more details on front-matter, see the edition guide.
|
||||
::
|
||||
|
||||
### **Social sharing (OG) image**
|
||||
|
||||
When you share a link of your documentation on social media or some chat platforms, the link will be **unfurled**, in other terms it gives a glimpse of what someone linked (displaying a title, description, and an image). All of these are powered by the **Open Graph Protocol**.
|
||||
|
||||
#### Documentation pages
|
||||
|
||||
We're using [Nuxt OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) under the hood to generate OG image for each documentation page based on the provided title and description. For example, the OG image for the current page is:
|
||||
|
||||
{.rounded-lg}
|
||||
|
||||
#### Landing page
|
||||
|
||||
Same as the documentation pages, the landing page uses the same OG image generator based on the provided title and description.
|
||||
|
||||
{.rounded-lg}
|
||||
|
||||
However, if you want to customize the OG image for your landing page, you can do so by adding a **absolute** path to an image in the the `seo.ogImage` key of your frontmatter.
|
||||
|
||||
```md [content/index.md]
|
||||
---
|
||||
seo:
|
||||
ogImage: '/social-card.png'
|
||||
---
|
||||
```
|
||||
|
||||
We recommend using a **1280×640** image for optimal display on social platforms.
|
||||
|
||||
::prose-tip
|
||||
OG images must be served with absolute URLs. By default, the site URL is inferred from your deployment platform, but you can override it by setting the `NUXT_SITE_URL` environment variable.
|
||||
::
|
||||
|
||||
## Header
|
||||
|
||||
Configure your documentation site’s `title` or `logo` :
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
header: {
|
||||
// Title to display if no logo
|
||||
title: '',
|
||||
// Logo configuration
|
||||
logo: {
|
||||
alt: '',
|
||||
// Light mode
|
||||
light: '',
|
||||
// Dark mode
|
||||
dark: ''
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Socials Links
|
||||
|
||||
Add your social media links in the footer using a `Record<string, string>` where the key matches an icon from [Simple Icons](https://simpleicons.org/) library.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
socials: {
|
||||
x: 'https://x.com/nuxt_js',
|
||||
discord: 'https://discord.com/invite/ps2h6QT',
|
||||
nuxt: 'https://nuxt.com',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
You can customize the table of content on the right sidebar of each page.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
toc: {
|
||||
// Rename the title of the table of contents
|
||||
title: 'On this page',
|
||||
// Add a bottom section to the table of contents
|
||||
bottom: {
|
||||
title: 'Community',
|
||||
links: [{
|
||||
icon: 'i-lucide-book-open',
|
||||
label: 'Nuxt UI Pro docs',
|
||||
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
|
||||
target: '_blank'
|
||||
}, {
|
||||
icon: 'i-simple-icons-nuxtdotjs',
|
||||
label: 'Purchase a license',
|
||||
to: 'https://ui.nuxt.com/pro/purchase',
|
||||
target: '_blank'
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## GitHub Integration
|
||||
|
||||
Docus reads your `.git/` folder to get the `url` and `branch` of your repository to add:
|
||||
|
||||
- GitHub icon in the header and footer
|
||||
- `Edit this page` and `Report an issue` links in the footer of each page.
|
||||
|
||||
You can customize the `url`, `branch` and `rootDir` of your docs application by adding the following configuration to your `app.config.ts` file:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
github: {
|
||||
url: 'https://github.com/nuxt-ui-pro/docus',
|
||||
branch: 'main',
|
||||
rootDir: 'docs'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
If you don't want to use GitHub, you can set the `github` key to `false` to disable the GitHub integration.
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
github: false
|
||||
})
|
||||
```
|
||||
|
||||
::prose-tip{to="/getting-started/studio"}
|
||||
Those configurations can also be handled in Studio editor, give it a try!
|
||||
::
|
||||
123
docs/content/2.concepts/4.theme.md
Normal file
123
docs/content/2.concepts/4.theme.md
Normal file
@ -0,0 +1,123 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-paint-roller
|
||||
title: Theme
|
||||
description: Custom the appearance of your Docus documentation thanks to Nuxt UI
|
||||
flexible theming.
|
||||
---
|
||||
|
||||
Docus is built on top of Nuxt UI and takes full advantage of Tailwind CSS v4, CSS variables. The Tailwind Variants API offers a flexible and scalable theming system.
|
||||
|
||||
::prose-tip{to="https://ui.nuxt.com/getting-started/theme"}
|
||||
For a full overview of Nuxt UI theming, check out the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
## Override with `@theme`
|
||||
|
||||
You can customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints
|
||||
|
||||
You can override this theme by creating your own `main.css` file in your application.
|
||||
|
||||
::warning
|
||||
To ensure a good behaviour with Docus, you must always start by importing `tailwindcss` and `ui-pro` but also source `content/` files and `app.config.ts` :
|
||||
|
||||
```css [app/assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@source "../../../content/**/*";
|
||||
@source "../../../node_modules/docus/app/**/*";
|
||||
```
|
||||
::
|
||||
|
||||
This way you can override your theme:
|
||||
|
||||
::code-group
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@source "../../../content/**/*";
|
||||
@source "../../../node_modules/docus/app/**/*";
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Colors
|
||||
|
||||
Docus uses pre-configured color aliases that are used to style components and power the `color` props across the UI.
|
||||
|
||||
Each badge below represents a default alias:
|
||||
|
||||
- :u-badge{label="primary" variant="outline"} → Main brand color, used as the default color for components :br [(default: green)]{.text-xs.text-muted}
|
||||
- :u-badge{color="secondary" label="secondary" variant="outline"} → Secondary color to complement the primary color :br [(default: blue)]{.text-xs.text-muted}
|
||||
- :u-badge{color="success" label="success" variant="outline"} → Used for success states :br [(default: green)]{.text-xs.text-muted}
|
||||
- :u-badge{color="info" label="info" variant="outline"} → Used for informational states :br [(default: blue)]{.text-xs.text-muted}
|
||||
- :u-badge{color="warning" label="warning" variant="outline"} → Used for warning states :br [(default: yellow)]{.text-xs.text-muted}
|
||||
- :u-badge{color="error" label="error" variant="outline"} → Used for form error validation states :br [(default: red)]{.text-xs.text-muted}
|
||||
- :u-badge{color="neutral" label="neutral" variant="outline"} → Neutral color for backgrounds, text, etc. :br [(default: slate)]{.text-xs.text-muted}
|
||||
|
||||
You can customize these colors globally by updating the `app.config.ts` file under the `ui.colors` key:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
neutral: 'zinc'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
Beyond colors, all [Nuxt UI components](https://ui.nuxt.com/components) can be themed globally via `app.config.ts`.
|
||||
|
||||
You can override any component’s appearance by using the same structure as the component’s internal theme object (displayed at [the end of each component page](https://ui.nuxt.com/components/card#theme)).
|
||||
|
||||
For example, to change the font weight of all buttons:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
button: {
|
||||
slots: {
|
||||
base: 'font-bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/components/button#theme"}
|
||||
To explore the available theme options for each component, refer to the **Theme** section in their respective Nuxt UI documentation page.
|
||||
::
|
||||
|
||||
##
|
||||
131
docs/content/2.concepts/5.customization.md
Normal file
131
docs/content/2.concepts/5.customization.md
Normal file
@ -0,0 +1,131 @@
|
||||
---
|
||||
navigation:
|
||||
icon: i-lucide-pen-tool
|
||||
title: Customization
|
||||
description: Learn how to override built-in components in Docus to customize
|
||||
your documentation.
|
||||
---
|
||||
|
||||
Docus is built on top of Nuxt 3 which offers a flexible component layer system that allows you to override some part of the UI by redefining specific components in your own app. This makes it easy to fully customize the visual appearance and behavior of your documentation without touching the core theme.
|
||||
|
||||
To override a component, simply create a Vue file with the same name in the `components/` directory. Docus will automatically use your version instead of the default one.
|
||||
|
||||
## App Header
|
||||
|
||||
You can customize different parts of the header by overriding the following components:
|
||||
|
||||
### `AppHeaderLogo`
|
||||
|
||||
To replace the default logo in the header, create the `components/AppHeaderLogo.vue` file. Your component will replace the default one provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderLogo.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `AppHeaderCTA`
|
||||
|
||||
To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the `components/AppHeaderCTA.vue` component.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::prose-note
|
||||
---
|
||||
to: https://github.com/nuxtlabs/docus/blob/docs/components/AppHeaderCTA.vue
|
||||
---
|
||||
By default this components is empty but you can have a look at how we're overriding it on Docus documentation itself.
|
||||
::
|
||||
|
||||
### `AppHeaderCenter`
|
||||
|
||||
To customize the center area in the header, override the `components/AppHeaderCenter.vue` component. Your component will replace the search bar provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderCenter.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `AppHeaderBody`
|
||||
|
||||
By default, when you open the menu on mobile view, Docus is displaying your `content/` folder tree as a menu with the [ContentNavigation](https://ui.nuxt.com/components/content-navigation) component. You can override this menu with the `components/AppHeaderBody.vue` component and fill the menu body (under the header) in mobile.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/app/AppHeaderBody.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
## Docs
|
||||
|
||||
You can also customize header and both asides of the documentation pages.
|
||||
|
||||
### `DocsPageHeaderLinks`
|
||||
|
||||
In the header right side of your documentation page, Docus default behaviour is displaying a dropdown with quick actions related to the current page’s Markdown source. It allows the reader of the documentation to:
|
||||
|
||||
- **Copy a direct link** to the raw `.md` file to the clipboard.
|
||||
- **View the Markdown source** in a new browser tab.
|
||||
- **Open the page’s content in ChatGPT or Claude**, pre-filled with a prompt to analyze the Markdown file.
|
||||
|
||||
These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own `components/DocsPageHeaderLinks.vue` component to override it.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsHeaderRight.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `DocsAsideRightBottom`
|
||||
|
||||
To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by Docus theme.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: i-lucide-code-xml
|
||||
to: https://github.com/nuxtlabs/docus/blob/app/components/docs/DocsAsideRightBottom.vue
|
||||
variant: link
|
||||
---
|
||||
Default component code
|
||||
::
|
||||
|
||||
### `DocsAsideLeftTop`
|
||||
|
||||
To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.
|
||||
|
||||
{.rounded-lg.border.border-accented}
|
||||
|
||||
::prose-note
|
||||
---
|
||||
to: https://github.com/nuxt/image/blob/docs/docus/docus/app/components/DocsAsideLeftTop.vue
|
||||
---
|
||||
By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
|
||||
::
|
||||
44
docs/content/2.concepts/6.llms.md
Normal file
44
docs/content/2.concepts/6.llms.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: LLMs Integration
|
||||
description: Docus generate AI-ready content files using Nuxt LLMs module
|
||||
navigation:
|
||||
icon: i-lucide-message-circle-code
|
||||
---
|
||||
|
||||
Docus integrates `nuxt-llms` by default to prepare your content for Large Language Models (LLMs). All your documentation pages are injected and `/llms.txt` and `/llms-full.txt` files are automatically generated and pre-rendered.
|
||||
|
||||
::prose-note{to="/llms.txt"}
|
||||
Have a check at the `/llms.txt` file generated for Docus documentation itself.
|
||||
::
|
||||
|
||||
## Defaults
|
||||
|
||||
Here are the default values use to generate the `/llms.txt` file:
|
||||
|
||||
- `domain` → computed based on your deployment platform (or by using `NUXT_SITE_URL` env variable)
|
||||
- `title` → extracted from your `package.json`
|
||||
- `description` → extracted from your `package.json`
|
||||
- `full.title` → extracted from your `package.json`
|
||||
- `full.description` → extracted from your `package.json`
|
||||
|
||||
## Customize
|
||||
|
||||
You can override your LLMs data from the `nuxt.config.ts` :
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
llms: {
|
||||
domain: 'https://your-site.com',
|
||||
title: 'Your Site Name',
|
||||
description: 'A brief description of your site',
|
||||
full: {
|
||||
title: 'Your Site Name',
|
||||
description: 'A brief description of your site',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
::tip{to="https://github.com/nuxtlabs/nuxt-llms"}
|
||||
Checkout the nuxt-llms documentation for more information about the module.
|
||||
::
|
||||
90
docs/content/2.concepts/7.nuxt.md
Normal file
90
docs/content/2.concepts/7.nuxt.md
Normal file
@ -0,0 +1,90 @@
|
||||
---
|
||||
description: Build interactive and reusable elements with Nuxt components
|
||||
title: Nuxt
|
||||
navigation:
|
||||
icon: i-simple-icons-nuxt
|
||||
---
|
||||
|
||||
## Nuxt App
|
||||
|
||||
Docus is built on top of **Nuxt 3**, which means your documentation project is a full Nuxt application. When you scaffold a project using the **Docus CLI**, it adds a layer by default giving you all the flexibility of a standard Nuxt app.
|
||||
|
||||
By default, the Docus starter only contains a `content/` and `public/` folder and a `package.json`. This is all you need to start writing your documentation. You can go further and use any feature of a Nuxt project, from [nuxt.config.ts](https://nuxt.com/docs/guide/directory-structure/nuxt-config) to [components](https://nuxt.com/docs/guide/directory-structure/nuxt-config) or [plugins](https://nuxt.com/docs/guide/directory-structure/plugins).
|
||||
|
||||
::prose-note
|
||||
You can use the Nuxt 4 [new directory structure](https://nuxt.com/docs/getting-started/upgrade#new-directory-structure) provided by the [compatibility version 4 .]() All files related to front app code goes in `app/` folder for cleaner organization and better IDE performance.
|
||||
::
|
||||
|
||||
## Nuxt Modules
|
||||
|
||||
Want to enhance your docs with custom functionality? You can install and configure [Nuxt modules]() just like in any Nuxt app.
|
||||
|
||||
To add [Plausible analytics](https://github.com/nuxt-modules/plausible?utm_source=nuxt.com\&utm_medium=aside-module\&utm_campaign=nuxt.com) to your documentation:
|
||||
|
||||
::prose-steps
|
||||
### Run the following command
|
||||
|
||||
```bash [Terminal]
|
||||
npm install @nuxtjs/plausible
|
||||
```
|
||||
|
||||
### Enable the module in `nuxt.config.ts`
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/plausible'],
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Custom components
|
||||
|
||||
With the power of `Nuxt Content` and `Nuxt UI`, and with the help of the `MDC` syntax, you can use [Nuxt UI components](/essentials/components) directly in your Markdown without any extra configuration needed.
|
||||
|
||||
However, you’re not limited to pre-built components. Docus makes it easy to create your own Vue components in your Nuxt app and use them in your content.
|
||||
|
||||
Here’s a simple example of a custom `BrowserFrame` component created in the `components` folder of your Nuxt app and integrated inside Markdown:
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
|
||||
```vue [components/content/BrowserFrame.vue]
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-fit rounded-xl border border-muted bg-accented shadow-md overflow-hidden px-2 pb-2">
|
||||
<div class="flex justify-between items-center px-2 py-2 bg-accented border-accented border-b">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-red-500 rounded-full" />
|
||||
<span class="w-3 h-3 bg-yellow-500 rounded-full" />
|
||||
<span class="w-3 h-3 bg-green-500 rounded-full" />
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<slot mdc-unwrap="p" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-simple-icons-markdown" label="Markdown"}
|
||||
```mdc
|
||||
::browser-frame{title="The Alps"}
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
::::browser-frame{title="The Alps"}
|
||||
{.rounded-lg}
|
||||
::::
|
||||
:::
|
||||
::
|
||||
|
||||
This approach lets you create dynamic docs powered by Nuxt components using Markdown.
|
||||
1
docs/content/3.essentials/.navigation.yml
Normal file
1
docs/content/3.essentials/.navigation.yml
Normal file
@ -0,0 +1 @@
|
||||
title: Essentials
|
||||
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
223
docs/content/3.essentials/1.markdown-syntax.md
Normal file
@ -0,0 +1,223 @@
|
||||
---
|
||||
title: Markdown Syntax
|
||||
description: Text, title, and styling in standard markdown.
|
||||
navigation:
|
||||
icon: i-lucide-heading-1
|
||||
---
|
||||
|
||||
## Titles
|
||||
|
||||
Use titles to introduce main sections. They structure your documentation and help users navigate content.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
## Titles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
## Titles
|
||||
```
|
||||
::
|
||||
|
||||
### Subtitles
|
||||
|
||||
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
### Subtitles
|
||||
|
||||
#code
|
||||
```mdc
|
||||
### Subtitles
|
||||
```
|
||||
::
|
||||
|
||||
::tip
|
||||
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
|
||||
::
|
||||
|
||||
## Text Formatting
|
||||
|
||||
Docus supports most Markdown formatting options.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------ | ------------ | ---------- |
|
||||
| Bold | `**bold**` | **Bold** |
|
||||
| Italic | `*italic*` | *Italic* |
|
||||
| Strike | `~~strike~~` | ~~Strike~~ |
|
||||
|
||||
Combine formatting for richer text styles and visual emphasis.
|
||||
|
||||
| Style | How to use | Result |
|
||||
| ------------- | ------------------- | ----------------- |
|
||||
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
|
||||
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
|
||||
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
|
||||
|
||||
## Links
|
||||
|
||||
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
|
||||
To create a link, wrap the link text in brackets `[]()`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Nuxt UI Pro](https://ui.nuxt.com/getting-started/installation/pro/nuxt)
|
||||
```
|
||||
::
|
||||
|
||||
### Internal links
|
||||
|
||||
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
[Installation](/getting-started/installation)
|
||||
|
||||
#code
|
||||
```mdc
|
||||
[Installation](/getting-started/installation)
|
||||
```
|
||||
::
|
||||
|
||||
## Lists
|
||||
|
||||
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
|
||||
|
||||
### Unordered
|
||||
|
||||
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm another list item.
|
||||
- I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Ordered
|
||||
|
||||
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
1. I'm a list item.
|
||||
2. I'm another list item.
|
||||
3. I'm the last list item.
|
||||
```
|
||||
::
|
||||
|
||||
### Nested
|
||||
|
||||
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
- I'm a list item.
|
||||
- I'm a nested list item.
|
||||
- I'm another nested list item.
|
||||
- I'm another list item.
|
||||
```
|
||||
::
|
||||
|
||||
## Tables
|
||||
|
||||
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
|
||||
#code
|
||||
```mdc
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
```
|
||||
::
|
||||
|
||||
## Blockquotes
|
||||
|
||||
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
|
||||
|
||||
### Singleline
|
||||
|
||||
Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
```
|
||||
::
|
||||
|
||||
### Multiline
|
||||
|
||||
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
|
||||
#code
|
||||
```mdc
|
||||
> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
|
||||
>
|
||||
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
|
||||
```
|
||||
::
|
||||
396
docs/content/3.essentials/2.code-blocks.md
Normal file
396
docs/content/3.essentials/2.code-blocks.md
Normal file
@ -0,0 +1,396 @@
|
||||
---
|
||||
title: Code Blocks
|
||||
description: Display inline code and code blocks in your documentation.
|
||||
navigation:
|
||||
icon: i-lucide-code-xml
|
||||
---
|
||||
|
||||
## Basic
|
||||
|
||||
### Inline Code
|
||||
|
||||
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
|
||||
### Code Blocks
|
||||
|
||||
Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.
|
||||
Filenames help users understand the code's location and purpose within a project.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
|
||||
#code
|
||||
````mdc
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro']
|
||||
})
|
||||
```
|
||||
````
|
||||
::
|
||||
|
||||
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
||||
|
||||
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
|
||||
Icons are already defined by default, but you can customize them in your `app.config.ts`:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
uiPro: {
|
||||
prose: {
|
||||
codeIcon: {
|
||||
terminal: 'i-ph-terminal-window-duotone'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## Advanced
|
||||
|
||||
### CodeGroup
|
||||
|
||||
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-group{.w-full}
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
:::code-group
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui-pro@next
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### CodeTree
|
||||
|
||||
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
|
||||
|
||||
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
|
||||
:::code-tree{default-value="app/app.config.ts"}
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui-pro'],
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
```css [app/assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
```
|
||||
|
||||
```ts [app/app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'sky',
|
||||
colors: 'slate'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```vue [app/app.vue]
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint --fix ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.18",
|
||||
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
||||
"nuxt": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "9.20.1",
|
||||
"typescript": "^5.7.2",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json [tsconfig.json]
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
```
|
||||
|
||||
````md [README.md]
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
````
|
||||
:::
|
||||
::
|
||||
|
||||
### `CodePreview`
|
||||
|
||||
Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
|
||||
Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
label: Preview
|
||||
---
|
||||
:::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0"
|
||||
---
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-preview
|
||||
`inline code`
|
||||
|
||||
#code
|
||||
```mdc
|
||||
`inline code`
|
||||
```
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `CodeCollapse`
|
||||
|
||||
Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability.
|
||||
|
||||
::code-preview
|
||||
---
|
||||
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
||||
---
|
||||
:::code-collapse{class="[&>div]:my-0"}
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::code-collapse
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--breakpoint-3xl: 1920px;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
::
|
||||
424
docs/content/3.essentials/3.components.md
Normal file
424
docs/content/3.essentials/3.components.md
Normal file
@ -0,0 +1,424 @@
|
||||
---
|
||||
title: Markdown Components
|
||||
description: Use Markdown components to help you structure your content, with
|
||||
the help of Nuxt UI Pro.
|
||||
navigation:
|
||||
icon: i-lucide-component
|
||||
title: Components
|
||||
---
|
||||
|
||||
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.
|
||||
|
||||
**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).
|
||||
|
||||
::prose-note{to="https://ui.nuxt.com/getting-started"}
|
||||
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
|
||||
::
|
||||
|
||||
### `Accordion`
|
||||
|
||||
Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui.nuxt.com/components/accordion) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
::::accordion
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: What is Docus and what are its key features??
|
||||
---
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::::
|
||||
|
||||
:::::accordion-item
|
||||
---
|
||||
icon: i-lucide-circle-help
|
||||
label: How do I get started with Docus?
|
||||
---
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::::
|
||||
|
||||
:::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::accordion
|
||||
|
||||
:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
|
||||
Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
|
||||
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
|
||||
:::
|
||||
|
||||
:::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
|
||||
Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||||
:::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Badge`
|
||||
|
||||
Use markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::badge
|
||||
**v3.0.0**
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::badge
|
||||
**v3.0.0**
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Callout`
|
||||
|
||||
Use markdown in the default slot of the `callout` component to add eye-catching context to your content.
|
||||
|
||||
Use the `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.
|
||||
|
||||
You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::div{.flex.flex-col.gap-4.w-full}
|
||||
:::::note{.w-full.my-0}
|
||||
Here's some additional information for you.
|
||||
:::::
|
||||
|
||||
:::::tip{.w-full.my-0}
|
||||
Here's a helpful suggestion.
|
||||
:::::
|
||||
|
||||
:::::warning{.w-full.my-0}
|
||||
Be careful with this action as it might have unexpected results.
|
||||
:::::
|
||||
|
||||
:::::caution{.w-full.my-0}
|
||||
This action cannot be undone.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::note
|
||||
Here's some additional information.
|
||||
::
|
||||
|
||||
::tip
|
||||
Here's a helpful suggestion.
|
||||
::
|
||||
|
||||
::warning
|
||||
Be careful with this action as it might have unexpected results.
|
||||
::
|
||||
|
||||
::caution
|
||||
This action cannot be undone.
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Card` and `CardGroup`
|
||||
|
||||
Use markdown in the default slot of the `card` component to highlight your content.
|
||||
|
||||
Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).
|
||||
|
||||
Wrap your `card` components with the `card-group` component to group them together in a grid layout.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::card-group{.w-full.my-0}
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Dashboard
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: SaaS
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Docs
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
:::::
|
||||
|
||||
:::::card
|
||||
---
|
||||
icon: i-simple-icons-github
|
||||
target: _blank
|
||||
title: Landing
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
:::card-group
|
||||
|
||||
::card
|
||||
---
|
||||
title: Dashboard
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/dashboard
|
||||
target: _blank
|
||||
---
|
||||
A dashboard with multi-column layout.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: SaaS
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/saas
|
||||
target: _blank
|
||||
---
|
||||
A template with landing, pricing, docs and blog.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Docs
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/docs
|
||||
target: _blank
|
||||
---
|
||||
A documentation with `@nuxt/content`.
|
||||
::
|
||||
|
||||
::card
|
||||
---
|
||||
title: Landing
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt-ui-pro/landing
|
||||
target: _blank
|
||||
---
|
||||
A landing page you can use as starting point.
|
||||
::
|
||||
|
||||
:::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Collapsible`
|
||||
|
||||
Wrap your content with the `collapsible` component to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::collapsible
|
||||
| Prop | Default | Type |
|
||||
| ------- | --------- | -------- |
|
||||
| `name` | | `string` |
|
||||
| `size` | `md` | `string` |
|
||||
| `color` | `neutral` | `string` |
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::collapsible
|
||||
|
||||
| Prop | Default | Type |
|
||||
|---------|-----------|--------------------------|
|
||||
| `name` | | `string`{lang="ts-type"} |
|
||||
| `size` | `md` | `string`{lang="ts-type"} |
|
||||
| `color` | `neutral` | `string`{lang="ts-type"} |
|
||||
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Field` and `FieldGroup`
|
||||
|
||||
A `field`is a prop or parameter to display in your content. You can group them by `field-group` in a list.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::field-group{.my-0}
|
||||
:::::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
:::::
|
||||
|
||||
:::::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
:::::
|
||||
|
||||
:::::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
:::::
|
||||
|
||||
:::::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::field-group
|
||||
::field{name="analytics" type="boolean"}
|
||||
Default to `false` - Enables analytics for your project (coming soon).
|
||||
::
|
||||
|
||||
::field{name="blob" type="boolean"}
|
||||
Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
|
||||
::
|
||||
|
||||
::field{name="cache" type="boolean"}
|
||||
Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
|
||||
::
|
||||
|
||||
::field{name="database" type="boolean"}
|
||||
Default to `false` - Enables SQL database to store your application's data.
|
||||
::
|
||||
::
|
||||
```
|
||||
:::
|
||||
::
|
||||
|
||||
### `Icon`
|
||||
|
||||
Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.
|
||||
|
||||
::code-preview
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:icon{name="i-simple-icons-nuxtdotjs"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Kbd`
|
||||
|
||||
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
|
||||
|
||||
::code-preview
|
||||
#code
|
||||
```mdc
|
||||
:kbd{value="meta"} :kbd{value="K"}
|
||||
```
|
||||
::
|
||||
|
||||
### `Tabs`
|
||||
|
||||
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.
|
||||
|
||||
::code-preview
|
||||
:::tabs{.w-full}
|
||||
::::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::
|
||||
```
|
||||
::::
|
||||
|
||||
::::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
::::
|
||||
:::
|
||||
|
||||
#code
|
||||
````mdc
|
||||
::tabs{.w-full}
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
```mdc
|
||||
::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
::::
|
||||
```
|
||||
::::
|
||||
|
||||
:::tabs-item{icon="i-lucide-eye" label="Preview"}
|
||||
:::::callout
|
||||
Lorem velit voluptate ex reprehenderit ullamco et culpa.
|
||||
:::::
|
||||
:::
|
||||
::
|
||||
````
|
||||
::
|
||||
|
||||
### `Steps`
|
||||
|
||||
Wrap your headings with the Steps component to display a list of steps.
|
||||
|
||||
Use the `level` prop to define which heading will be used for the steps.
|
||||
|
||||
::tabs
|
||||
:::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
|
||||
::::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::::
|
||||
:::
|
||||
|
||||
:::tabs-item{icon="i-lucide-code" label="Code"}
|
||||
````mdc
|
||||
::steps{level="4"}
|
||||
#### Start a fresh new project
|
||||
|
||||
```bash [Terminal]
|
||||
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||
```
|
||||
|
||||
#### Run docus CLI to run your dev server
|
||||
|
||||
```bash [Terminal]
|
||||
docus dev
|
||||
```
|
||||
::
|
||||
````
|
||||
:::
|
||||
::
|
||||
53
docs/content/3.essentials/4.images-embeds.md
Normal file
53
docs/content/3.essentials/4.images-embeds.md
Normal file
@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Images and Embeds
|
||||
description: Add image, video, and other HTML elements
|
||||
navigation:
|
||||
icon: i-lucide-image
|
||||
seo:
|
||||
description: Add image, video, and other HTML elements using Docus theme
|
||||
---
|
||||
|
||||
## Markdown
|
||||
|
||||
Display images or videos using standard Markdown syntax.
|
||||
|
||||
### Images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
Or with your local images
|
||||
|
||||
::code-preview
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
|
||||
```
|
||||
::
|
||||
|
||||
::note{to="https://image.nuxt.com/"}
|
||||
Docus will use `<NuxtImg>` component under the hood instead of the native `img` tag.
|
||||
::
|
||||
|
||||
### Videos
|
||||
|
||||
::prose-code-preview
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
|
||||
|
||||
|
||||
#code
|
||||
```mdc
|
||||
:video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"}
|
||||
```
|
||||
::
|
||||
|
||||
###
|
||||
269
docs/content/index.md
Normal file
269
docs/content/index.md
Normal file
@ -0,0 +1,269 @@
|
||||
---
|
||||
seo:
|
||||
title: Write beautiful docs with Markdown
|
||||
description: Ship fast, flexible, and SEO-optimized documentation with beautiful
|
||||
design out of the box. Docus brings together the best of the Nuxt ecosystem.
|
||||
Powered by Nuxt UI Pro.
|
||||
---
|
||||
|
||||
::u-page-hero
|
||||
#title
|
||||
Write beautiful docs with Markdown
|
||||
|
||||
#description
|
||||
Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box.
|
||||
|
||||
Docus brings the best of the Nuxt ecosystem into one CLI.
|
||||
|
||||
#links
|
||||
:::u-button
|
||||
---
|
||||
color: neutral
|
||||
size: xl
|
||||
to: /getting-started/installation
|
||||
trailing-icon: i-lucide-arrow-right
|
||||
---
|
||||
Get started
|
||||
:::
|
||||
|
||||
:::u-button
|
||||
---
|
||||
color: neutral
|
||||
icon: simple-icons-github
|
||||
size: xl
|
||||
to: https://github.com/nuxtlabs/docus
|
||||
variant: outline
|
||||
---
|
||||
Star on GitHub
|
||||
:::
|
||||
|
||||
#headline
|
||||
:::u-button
|
||||
---
|
||||
size: sm
|
||||
to: https://content.nuxt.com/blog/docus-v3
|
||||
variant: outline
|
||||
---
|
||||
Docus, the comeback →
|
||||
:::
|
||||
::
|
||||
|
||||
::u-page-section
|
||||
:::u-page-grid
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: group col-span-2 lg:col-span-1
|
||||
target: _blank
|
||||
to: https://nuxt.com
|
||||
---
|
||||
:::::floating-nuxt
|
||||
:::::
|
||||
|
||||
#title
|
||||
Built with [Nuxt 3]{.text-primary}
|
||||
|
||||
#description
|
||||
Optimized by the most famous Vue framework. Docus gives you everything you need to build fast, performant, and SEO-friendly websites.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2
|
||||
target: _blank
|
||||
to: https://ui.nuxt.com/pro
|
||||
---
|
||||
:::::u-color-mode-image
|
||||
---
|
||||
height: 320
|
||||
width: 859
|
||||
alt: Beautiful visual powered by UI Pro
|
||||
class: w-full h-80 object-cover rounded-lg
|
||||
dark: /landing/dark/templates-ui-pro.webp
|
||||
light: /landing/light/templates-ui-pro.webp
|
||||
---
|
||||
:::::
|
||||
|
||||
#title
|
||||
Powered by [Nuxt UI Pro]{.text-primary}
|
||||
|
||||
#description
|
||||
Beautiful out of the box, minimal by design but highly customizable. Docus leverages Nuxt UI Pro to give you the best docs writing experience with zero boilerplate, just focus on your content.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2
|
||||
target: _blank
|
||||
---
|
||||
:::::tabs
|
||||
::::::tabs-item{.mt-5 icon="i-lucide-eye" label="Preview"}
|
||||
:::::::div{.flex.flex-col.gap-4}
|
||||
::::::::note{.my-0}
|
||||
Here's some additional information for you.
|
||||
::::::::
|
||||
|
||||
::::::::tip{.my-0}
|
||||
Here's a helpful suggestion.
|
||||
::::::::
|
||||
|
||||
::::::::warning{.my-0}
|
||||
Be careful with this action as it might have unexpected results.
|
||||
::::::::
|
||||
|
||||
::::::::caution{.my-0}
|
||||
This action cannot be undone.
|
||||
::::::::
|
||||
:::::::
|
||||
::::::
|
||||
|
||||
::::::tabs-item
|
||||
---
|
||||
class: mt-5 mb-2 text-xs overflow-x-auto
|
||||
icon: i-lucide-code
|
||||
label: Code
|
||||
---
|
||||
```mdc
|
||||
::note
|
||||
Here's some additional information.
|
||||
::
|
||||
|
||||
::tip
|
||||
Here's a helpful suggestion.
|
||||
::
|
||||
|
||||
::warning
|
||||
Be careful with this action as it might have unexpected results.
|
||||
::
|
||||
|
||||
::caution
|
||||
This action cannot be undone.
|
||||
::
|
||||
```
|
||||
::::::
|
||||
:::::
|
||||
|
||||
#title
|
||||
Enhanced Markdown syntax by [Nuxt Content]{.text-primary}
|
||||
|
||||
#description
|
||||
The only thing you need to take care about is writing your content. Write your pages in Markdown and extend with MDC syntax to embed Nuxt UI or custom Vue components. Structure, routing, and rendering are handled for you.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2 md:col-span-1
|
||||
target: _blank
|
||||
---
|
||||
:::::div{.bg-elevated.rounded-lg.p-3.overflow-x-auto}
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'green',
|
||||
secondary: 'sky',
|
||||
},
|
||||
},
|
||||
socials: {
|
||||
x: 'https://x.com/nuxt_js',
|
||||
nuxt: 'https://nuxt.com'
|
||||
}
|
||||
})
|
||||
```
|
||||
:::::
|
||||
|
||||
#title
|
||||
Customize with [Nuxt App Config]{.text-primary}
|
||||
|
||||
#description
|
||||
Update colors, social links, header logos and component styles globally using the `app.config.ts`, no direct code modifications required.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2 md:col-span-1 min-h-[450px]
|
||||
target: _blank
|
||||
---
|
||||
:::::color-mode-switch
|
||||
:::::
|
||||
|
||||
#title
|
||||
[Nuxt Color]{.text-primary} mode
|
||||
|
||||
#description
|
||||
Built-in dark mode provided, no configuration required.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2
|
||||
target: _blank
|
||||
---
|
||||
:::::u-color-mode-image
|
||||
---
|
||||
height: 554
|
||||
width: 859
|
||||
alt: Built-in navigation and full-text search
|
||||
class: rounded-lg
|
||||
dark: /landing/dark/command-menu.png
|
||||
format: webp
|
||||
light: /landing/light/command-menu.png
|
||||
loading: lazy
|
||||
---
|
||||
:::::
|
||||
|
||||
#title
|
||||
Built-in navigation and [full-text search]{.text-primary}
|
||||
|
||||
#description
|
||||
Only focus on ordering your content, Docus handles the search modal and auto-generates the side navigation for you.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2
|
||||
target: _blank
|
||||
---
|
||||
:::::browser-frame
|
||||
:video{.rounded-md controls loop playsinline src="https://res.cloudinary.com/nuxt/video/upload/v1747230893/studio/wzt9zfmdvk7hgmdx3cnt.mp4"}
|
||||
:::::
|
||||
|
||||
#title
|
||||
Collaborate on [Nuxt Studio]{.text-primary}
|
||||
|
||||
#description
|
||||
Write and manage your content visually, with zero Markdown knowledge required. Let your non technical colleagues collaborate on the documentation and integrate Vue components without code skills.
|
||||
::::
|
||||
|
||||
::::u-page-card
|
||||
---
|
||||
spotlight: true
|
||||
class: col-span-2 lg:col-span-1
|
||||
target: _blank
|
||||
to: https://image.nuxt.com/
|
||||
---
|
||||
:::::div{.flex-1.flex.items-center.justify-center}
|
||||
::::::u-color-mode-image
|
||||
---
|
||||
alt: Nuxt Image visual
|
||||
class: w-[30%] lg:w-[70%] my-12 lg:my-0
|
||||
dark: /landing/dark/nuxt-image.svg
|
||||
light: /landing/light/nuxt-image.svg
|
||||
---
|
||||
::::::
|
||||
:::::
|
||||
|
||||
#title
|
||||
[Nuxt Image]{.text-primary} optimization
|
||||
|
||||
#description
|
||||
Docus automatically converts Markdown images to use `<NuxtImg>` .
|
||||
::::
|
||||
:::
|
||||
::
|
||||
16
docs/nuxt.config.ts
Normal file
16
docs/nuxt.config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/plausible'],
|
||||
css: ['../app/assets/css/main.css'],
|
||||
site: {
|
||||
name: 'Docus',
|
||||
},
|
||||
llms: {
|
||||
domain: 'https://docus.dev',
|
||||
title: 'Docus',
|
||||
description: 'Write beautiful docs with Markdown.',
|
||||
full: {
|
||||
title: 'Docus',
|
||||
description: 'Write beautiful docs with Markdown.',
|
||||
},
|
||||
},
|
||||
})
|
||||
15
docs/package.json
Normal file
15
docs/package.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "docus-docs",
|
||||
"description": "Official documentation for Docus, also used as playground.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "docus build",
|
||||
"dev": "docus dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/plausible": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docus": "workspace:*"
|
||||
}
|
||||
}
|
||||
BIN
docs/public/documentation/app-header-body.webp
Normal file
BIN
docs/public/documentation/app-header-body.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
docs/public/documentation/app-header-center.webp
Normal file
BIN
docs/public/documentation/app-header-center.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/public/documentation/app-header-cta.webp
Normal file
BIN
docs/public/documentation/app-header-cta.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/public/documentation/app-header-logo.webp
Normal file
BIN
docs/public/documentation/app-header-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/public/documentation/app-page-header-links.webp
Normal file
BIN
docs/public/documentation/app-page-header-links.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/public/documentation/docs-aside-left-top.webp
Normal file
BIN
docs/public/documentation/docs-aside-left-top.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/public/documentation/docs-aside-right-bottom.webp
Normal file
BIN
docs/public/documentation/docs-aside-right-bottom.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
docs/public/documentation/markdown-editor-studio.png
Normal file
BIN
docs/public/documentation/markdown-editor-studio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
docs/public/documentation/mountains.webp
Normal file
BIN
docs/public/documentation/mountains.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
docs/public/documentation/og-image-example.png
Normal file
BIN
docs/public/documentation/og-image-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
docs/public/documentation/preview-studio.png
Normal file
BIN
docs/public/documentation/preview-studio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
docs/public/documentation/visual-editor-studio.png
Normal file
BIN
docs/public/documentation/visual-editor-studio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
docs/public/favicon.ico
Normal file
BIN
docs/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
docs/public/landing/dark/command-menu.png
Normal file
BIN
docs/public/landing/dark/command-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
83
docs/public/landing/dark/nuxt-image.svg
Normal file
83
docs/public/landing/dark/nuxt-image.svg
Normal file
@ -0,0 +1,83 @@
|
||||
<svg
|
||||
width="309"
|
||||
height="309"
|
||||
viewBox="0 0 309 309"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="309"
|
||||
height="309"
|
||||
rx="8"
|
||||
fill="url(#paint0_linear_549_2095)"
|
||||
fill-opacity="0.2"
|
||||
/>
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="308"
|
||||
height="308"
|
||||
rx="8"
|
||||
stroke="url(#paint1_linear_549_2095)"
|
||||
stroke-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M250.424 224.554C251.995 199.097 246.309 173.754 234.01 151.409C221.753 129.139 206.184 104.281 197.759 104.281C182.497 104.281 159.941 135.743 151.205 139.926C139.866 129.94 100.698 80.5 88.8565 80.5C77.0152 80.5 29.4718 153.81 20.6396 172.34C6.93039 201.102 2.09076 293.5 22.2949 293.5C35.8243 293.5 51.7545 293.459 69.0776 293.414C108.704 293.311 190.075 293.104 232.215 293.414C243.818 293.499 248.52 255.423 250.424 224.554Z"
|
||||
fill="url(#paint2_linear_549_2095)"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<path
|
||||
d="M241.47 38.3696C241.47 47.4864 234.079 54.877 224.963 54.877C215.846 54.877 208.455 47.4864 208.455 38.3696C208.455 29.2529 215.846 21.8623 224.963 21.8623C234.079 21.8623 241.47 29.2529 241.47 38.3696Z"
|
||||
fill="white"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_549_2095"
|
||||
x1="126.999"
|
||||
y1="48.1171"
|
||||
x2="132.171"
|
||||
y2="247.688"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
docs/public/landing/dark/templates-ui-pro.webp
Normal file
BIN
docs/public/landing/dark/templates-ui-pro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
BIN
docs/public/landing/light/command-menu.png
Normal file
BIN
docs/public/landing/light/command-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
83
docs/public/landing/light/nuxt-image.svg
Normal file
83
docs/public/landing/light/nuxt-image.svg
Normal file
@ -0,0 +1,83 @@
|
||||
<svg
|
||||
width="309"
|
||||
height="309"
|
||||
viewBox="0 0 309 309"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="309"
|
||||
height="309"
|
||||
rx="8"
|
||||
fill="url(#paint0_linear_549_2095)"
|
||||
fill-opacity="0.2"
|
||||
/>
|
||||
<rect
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="308"
|
||||
height="308"
|
||||
rx="8"
|
||||
stroke="url(#paint1_linear_549_2095)"
|
||||
stroke-opacity="0.4"
|
||||
/>
|
||||
<path
|
||||
d="M250.424 224.554C251.995 199.097 246.309 173.754 234.01 151.409C221.753 129.139 206.184 104.281 197.759 104.281C182.497 104.281 159.941 135.743 151.205 139.926C139.866 129.94 100.698 80.5 88.8565 80.5C77.0152 80.5 29.4718 153.81 20.6396 172.34C6.93039 201.102 2.09076 293.5 22.2949 293.5C35.8243 293.5 51.7545 293.459 69.0776 293.414C108.704 293.311 190.075 293.104 232.215 293.414C243.818 293.499 248.52 255.423 250.424 224.554Z"
|
||||
fill="url(#paint2_linear_549_2095)"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<path
|
||||
d="M241.47 38.3696C241.47 47.4864 234.079 54.877 224.963 54.877C215.846 54.877 208.455 47.4864 208.455 38.3696C208.455 29.2529 215.846 21.8623 224.963 21.8623C234.079 21.8623 241.47 29.2529 241.47 38.3696Z"
|
||||
fill="#222"
|
||||
fill-opacity="0.3"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#222" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#222"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_549_2095"
|
||||
x1="154.5"
|
||||
y1="0.5"
|
||||
x2="154.5"
|
||||
y2="308.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#222" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#222"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_549_2095"
|
||||
x1="126.999"
|
||||
y1="48.1171"
|
||||
x2="132.171"
|
||||
y2="247.688"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#222" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#222"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
docs/public/landing/light/templates-ui-pro.webp
Normal file
BIN
docs/public/landing/light/templates-ui-pro.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
29
docs/public/landing/nuxt-logo-3D.svg
Normal file
29
docs/public/landing/nuxt-logo-3D.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="400" height="348" viewBox="0 0 364 316" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M165.499 171.171L106.762 258.281L61.6377 260.746L149.13 130.992L165.499 171.171Z" fill="url(#paint0_linear_2948_8537)"/>
|
||||
<path d="M207.7 142.217L195.91 159.719L170.4 97.1537C170.155 96.5565 169.879 95.9747 169.573 95.4234C169.435 95.1784 169.297 94.9488 169.144 94.7191C169.006 94.4894 168.853 94.2597 168.7 94.0454C168.578 93.8616 168.44 93.6932 168.287 93.5247C168.011 93.1573 167.705 92.8051 167.383 92.4682C167.261 92.3304 167.108 92.1773 166.97 92.0548C166.848 91.9323 166.725 91.8251 166.603 91.7179C166.541 91.6567 166.495 91.6107 166.434 91.5495L194.21 113.905C196.124 115.452 197.609 117.457 198.574 119.831L207.7 142.217Z" fill="url(#paint1_linear_2948_8537)"/>
|
||||
<path d="M246.668 197.983L236.593 212.912L209.751 252.708L199.018 253.289L189.049 268.05L177.137 285.69L182.22 289.778C168.087 303.712 151.458 311.322 132.028 312.378L66.3544 315.977C63.0317 316.145 59.908 315.395 57.2897 313.803C56.7691 313.481 56.2791 313.144 55.8197 312.761L28.0591 290.406C28.0591 290.406 28.151 290.467 28.1969 290.498C28.4878 290.727 28.7941 290.926 29.1156 291.125C31.7187 292.718 34.8576 293.468 38.1803 293.284L103.853 289.686C129.869 288.262 150.861 275.109 167.582 250.778L208.404 190.235L217.346 176.974L220.163 172.794L230.269 157.834L246.668 197.983Z" fill="url(#paint2_linear_2948_8537)"/>
|
||||
<path d="M331.849 281.554C331.329 285.076 329.935 288.583 327.822 291.722C325.709 294.86 322.953 297.509 319.799 299.439C316.66 301.353 313.26 302.455 309.938 302.639L205.311 308.366L182.22 289.777L177.137 285.689L186.6 285.168L281.764 279.962C285.086 279.778 288.486 278.66 291.625 276.762C294.779 274.832 297.535 272.168 299.648 269.044C301.761 265.89 303.154 262.399 303.675 258.877C304.196 255.356 303.844 251.941 302.634 249.001L251.584 123.963C251.262 123.167 250.879 122.417 250.435 121.712C250.328 121.529 250.206 121.345 250.083 121.161C249.976 121.008 249.884 120.855 249.762 120.717C249.134 119.844 248.399 119.063 247.603 118.359L275.394 140.73C277.293 142.261 278.793 144.282 279.758 146.656L330.808 271.678C332.018 274.633 332.37 278.048 331.849 281.554Z" fill="url(#paint3_linear_2948_8537)"/>
|
||||
<path d="M302.633 249.002L251.583 123.964C251.262 123.168 250.879 122.418 250.435 121.714C250.328 121.53 250.205 121.346 250.083 121.162C249.975 121.009 249.884 120.856 249.761 120.718C249.133 119.846 248.398 119.065 247.602 118.36C247.556 118.33 247.51 118.299 247.48 118.268C246.944 117.809 246.362 117.38 245.749 117.013C243.131 115.405 240.007 114.655 236.685 114.839C233.362 115.022 229.947 116.125 226.824 118.039C223.685 119.968 220.913 122.632 218.8 125.756L207.699 142.216L195.909 159.718L170.399 97.1531C170.154 96.556 169.878 95.9741 169.572 95.4229C169.434 95.1779 169.297 94.9482 169.143 94.7185C169.006 94.4889 168.852 94.2592 168.699 94.0448C168.577 93.8611 168.439 93.6926 168.286 93.5242C168.01 93.1567 167.704 92.8045 167.382 92.4677C167.26 92.3299 167.107 92.1767 166.969 92.0543C166.847 91.9318 166.724 91.8246 166.602 91.7174C166.54 91.6561 166.494 91.6102 166.433 91.549C166.341 91.4724 166.234 91.3958 166.142 91.3193C165.652 90.9059 165.116 90.5231 164.565 90.1862C161.962 88.5937 158.838 87.8435 155.5 88.0272C152.178 88.2109 148.763 89.3134 145.624 91.2274C142.485 93.1567 139.714 95.8057 137.616 98.9447L26.2671 264.115C24.1541 267.254 22.7607 270.761 22.2401 274.282C21.7041 277.789 22.0716 281.203 23.2813 284.159C24.3072 286.7 25.9456 288.829 28.0586 290.406C28.1046 290.436 28.1505 290.467 28.1964 290.498C28.4874 290.727 28.7936 290.926 29.1151 291.126C31.7182 292.718 34.8571 293.468 38.1799 293.285L103.853 289.686C129.868 288.262 150.861 275.109 167.582 250.778L208.403 190.235L217.346 176.975L220.163 172.794L230.269 157.835L246.668 197.983L267.707 249.523L209.751 252.708L199.017 253.29L189.049 268.05L177.136 285.69L186.599 285.169L281.763 279.963C285.086 279.779 288.485 278.662 291.624 276.763C294.778 274.834 297.535 272.169 299.648 269.046C301.761 265.891 303.154 262.4 303.675 258.878C304.195 255.357 303.843 251.942 302.633 249.002ZM144.782 235.482C133.727 251.284 122.947 257.409 107.528 258.235L106.762 258.281L61.6378 260.747L149.131 130.993L165.499 171.171L174.028 192.118L144.782 235.482Z" fill="url(#paint4_linear_2948_8537)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2948_8537" x1="156.127" y1="244.694" x2="76.2665" y2="203.027" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DC82"/>
|
||||
<stop offset="1" stop-color="#058163"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2948_8537" x1="203.976" y1="151.285" x2="169.047" y2="137.503" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DC82"/>
|
||||
<stop offset="1" stop-color="#058163"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_2948_8537" x1="226.943" y1="296.433" x2="108.901" y2="190.087" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DC82"/>
|
||||
<stop offset="1" stop-color="#058163"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_2948_8537" x1="318.102" y1="284.86" x2="199.919" y2="222.041" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DC82"/>
|
||||
<stop offset="1" stop-color="#058163"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_2948_8537" x1="278.471" y1="267.913" x2="125.351" y2="130.87" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00DC82"/>
|
||||
<stop offset="1" stop-color="#2CFFCC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
BIN
docs/public/mountains.webp
Normal file
BIN
docs/public/mountains.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
3
docs/tsconfig.json
Normal file
3
docs/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Reference in New Issue
Block a user