shadcn-docs-nuxt-v3

shadcn-docs-nuxt

Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.

📖 Documentation / Demo

Quick Start

1. Create a project with the starter template

npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter

2. Navigating to the Project Directory

cd [project-name]

3. Start dev server

npm run dev

Contributing

1. Clone this repository.
2. Install dependencies bun install.
3. Use bun run dev to start dev server.
4. Before committing, run bun run lint:fix and bun run typecheck.

Credits

• Nuxt Content: Content made easy for Vue Developers.
• shadcn-ui: For the beautiful component & docs design.
• shadcn-vue: For the vue port of shadcn-ui & some docs component source.
• Docus: For the inspiration & some docs component source.
• Nuxt UI Pro Docs: For the inspiration.

Who's Using

• unovue/inspira-ui 1.9K ⭐️
• motion-vue 1.5K ⭐️
• nuxt-monaco-editor
• nuxt-umami
• Msty
• Add your project 🚀

License

MIT

---

Migration Issues

CodeGroup Component Not Showing in PmX

Solution: Add the following to the components section in nuxt.config.ts:

    global: true,

Source: https://github.com/nuxt/content/issues/2443#issuecomment-1944028599

Navigation Routing Issues

Solution 1: Define prefix as /docs

1. Define prefix as /docs in content.config.ts
2. This allows useContent to directly get content through queryCollection(doc_${locale.value}).path(route.path).first();
3. In navigation, since we defined /docs, we get the root path /docs navigation with only one object, so we need to get the children of the first object once:

export async function useNavigation() {
  const { locale } = useI18n();
  const { data } = await useAsyncData('navigation', () => {
    return queryCollectionNavigation(`doc_${locale.value}`)
  });
  return {
    navigation: computed(() => data.value?.[0]?.children),
  };
}

Note: This approach doesn't support multilingual functionality.

Solution 2: Remove prefix to default

Set i18n.strategy: 'prefix' in nuxt.config.ts.

This ensures correct path linking in navigation.

The only issue is that all pages will have language prefixes like /en and /zh.

Known Issues

Code blocks not displaying correctly in pm-x parsing

Syntax highlighting is not working. However, it works fine when displaying code blocks directly.

Related migration: Official change from ProseCode to ProsePre, and ProseCodeInline to ProseCode.

Icons not showing in file tree files

Brief 404 flash when clicking navigation

This occurs when triggering redirect in [...slug].vue