diff --git a/docs/.env.example b/docs/.env.example index 199b17aa3bc..5609cc80854 100644 --- a/docs/.env.example +++ b/docs/.env.example @@ -1,2 +1,4 @@ # Local version of the website theme WEBSITE_THEME=/my/path/to/website-theme + +OPEN_COLLECTIVE_API_KEY= diff --git a/docs/.gitignore b/docs/.gitignore index f209138dc07..85bf8a594d4 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -6,3 +6,4 @@ static/sw.js .yarn/* !.yarn/releases !yarn.lock +.vercel diff --git a/docs/content/0.index.md b/docs/content/0.index.md new file mode 100644 index 00000000000..ae259260fa9 --- /dev/null +++ b/docs/content/0.index.md @@ -0,0 +1,337 @@ +--- +title: 'The Intuitive Web Framework' +description: 'Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful.' +showcasesListId: 505 +--- + +::home-hero +--- +primaryButtonText: 'Get started' +primaryButtonLink: '/docs/getting-started/introduction' +secondaryButtonText: 'Open on Github' +secondaryButtonLink: 'https://github.com/nuxt/framework' +--- + +#title +The Intuitive Web Framework + +#titleAnimationWord +today. + +#description +Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful. +:: + + +::home-section{visible} +#title +Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} +#description +How a user interacts with and experiences your website will determine your impact. Utility, ease of use, and efficiency are key. **Nuxt is built with a set of features that make this possible.** +#extra + ::home-card-list + :::home-card-item + --- + image: + light: 'ux-fast-light.svg' + dark: 'ux-fast.svg' + --- + #title + Fast and Furious + #description + Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building. + ::: + :::home-card-item + --- + image: + light: 'ux-hybrid-light.svg' + dark: 'ux-hybrid.svg' + --- + #title + On-demand Rendering + #description + Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR. + Build any kind of website or web application with optimized performance in mind. + ::: + :::home-card-item + --- + image: + light: 'ux-seo-light.svg' + dark: 'ux-seo.svg' + --- + #title + SEO & Web Vitals + #description + By leveraging server-side rendering, ESM format and optimized images, Nuxt websites are indexable by search engines while giving the feeling of an app to the end-users. + ::: + :: +:: + +::home-section +--- +to: "/showcase" +titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl' +--- +#title +Trusted by world-class companies +#description +Explore our selection of websites & applications made with Nuxt. F-500 companies, creative agencies and freelancers all trust us. +#link +Discover our showcase +#extra +:::home-companies-carousel +::: +:: + +::home-section +#title +Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} +#description +Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence. +#extra + ::home-dx-section + --- + buttonLink: "/docs/getting-started/installation" + --- + ::home-card-list + :::home-card-item + --- + image: + light: 'dx-plug-and-play-light.svg' + dark: 'dx-plug-and-play.svg' + --- + #title + Plug & Play + #description + Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams. + ::: + :::home-card-item + --- + image: + light: 'dx-effortless-light.svg' + dark: dx-effortless.svg + --- + #title + Automation + #description + Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more. + ::: + :::home-card-item + --- + image: + light: 'dx-batteries-light.svg' + dark: 'dx-batteries.svg' + --- + #title + Batteries Included + #description + Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more. + ::: + :: + :: +:: + +::home-section +--- +titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl' +--- +#title +Trusted by the world wide web +#description +Their opinions are valuable and worth sharing to everyone. +#extra + :::home-testimonials-list + #items + ::::home-testimonials-item + --- + authorImg: evan + authorUrl: 'https://twitter.com/youyuxi' + --- + #author + Evan You + #job + Creator of VueJS + #quote + Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake. + :::: + + ::::home-testimonials-item + --- + authorImg: sarah + authorUrl: 'https://twitter.com/sarah_edo' + --- + #author + Sarah Drasner + #job + Core Team of Vue.js + #quote + Nuxt has outstanding developer productivity, experience, and performance right out of the gate! + There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications. + :::: + + ::::home-testimonials-item + --- + authorImg: addy + authorUrl: 'https://twitter.com/addyosmani' + --- + #author + Addy Osmani + #job + Chief Engineer of Chrome + #quote + Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX. + :::: + ::: +:: + +::home-section +#title +Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} +#description +Nuxt is made with a robust plugin system. Integrate with popular CMS or UI librairies with one line of code. With more than 15M monthly downloads and 1K contributors, Nuxt modules are you day to day companions. +#link +Explore Nuxt modules +#extra + ::home-modules-list + :: +:: + +::home-section +#title +A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300} +#description +Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js. +#extra + ::home-card-list + --- + gridClass: 'lg:grid-cols-4' + --- + :::home-card-item + --- + icon: 'fa-brands:npm' + to: 'https://www.npmjs.com/package/nuxt' + --- + #title + 56M + #description + npm downloads + ::: + :::home-card-item + --- + icon: 'fa-brands:discord' + to: 'https://discord.com/invite/ps2h6QT' + --- + #title + 20k + #description + Discord members + ::: + :::home-card-item + --- + icon: 'fa-brands:github' + to: 'https://github.com/nuxt' + --- + #title + 55k + #description + GitHub stars + ::: + :::home-card-item + --- + icon: 'fa-brands:twitter' + to: 'https://twitter.com/nuxt_js' + --- + #title + 76k + #description + Twitter followers + ::: + :: +:: + +::home-section +#title +A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400} +#description +Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence. +#extra +::home-needs-section +--- +buttonLink: "/support/solutions" +--- +#cards +:::home-card-list + :::home-card-item + --- + headerClass: 'justify-start px-4 pt-4 sm:px-6' + image: + light: 'needs-official-agency-light.svg' + dark: 'needs-official-agency.svg' + imageHeight: '58' + imageWidth: '52' + contentClass: 'gap-y-2' + to: '/support/agencies' + --- + #title + Official agency partners + #description + A careful network of trusted agencies from all over the world! + ::: + :::home-card-item + --- + headerClass: 'justify-start px-4 pt-4 sm:px-6' + image: + light: 'needs-nuxt-expert-light.svg' + dark: 'needs-nuxt-expert.svg' + imageHeight: '58' + imageWidth: '52' + contentClass: 'gap-y-2' + to: '/support/solutions' + --- + #title + Nuxt experts network + #description + A network of freelance from all over the world, certified by the NuxtLabs team ! + ::: + :::home-card-item + --- + headerClass: 'justify-start px-4 pt-4 sm:px-6' + contentClass: 'gap-y-2' + image: + light: 'needs-community-support-light.svg' + dark: 'needs-community-support.svg' + imageHeight: '58' + imageWidth: '52' + to: '/support/solutions' + --- + #title + Community support + #description + More than 2000 active contributors on multiple platforms are here to help ! + ::: +::: +:: +:: + +::home-journey-section +#content + :::home-section + --- + buttons: + - label: 'Get started' + size: 'xl' + variant: 'primary-gradient' + to: '/docs/getting-started/introduction' + - label: 'Explore Examples' + size: 'xl' + variant: 'secondary' + to: '/docs/examples/essentials/hello-world' + --- + #sectionTitle + GETTING STARTED + #title + Start your Nuxt Journey + #description + Learn everything you need to know, from beginner to master. + ::: +:: diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.docs/1.getting-started/1.introduction.md similarity index 88% rename from docs/content/1.getting-started/1.introduction.md rename to docs/content/1.docs/1.getting-started/1.introduction.md index 51d9217602b..f3a5b08639a 100644 --- a/docs/content/1.getting-started/1.introduction.md +++ b/docs/content/1.docs/1.getting-started/1.introduction.md @@ -26,7 +26,7 @@ Nuxt takes care of this and provides both frontend and backend functionality so ### View engine -Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/guide/concepts/vuejs-development). +Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/docs/guide/concepts/vuejs-development). ### Automation and conventions @@ -36,12 +36,12 @@ Nuxt uses conventions and an opinionated directory structure to automate repetit - Auto-imports - File-system routing and API layer - Data-fetching utilities -- Zero-config Typescript support +- Zero-config TypeScript support - Configured build tools :: ::alert{type="info"} -Discover more in the [Key concepts section](/guide/concepts/auto-imports). +Discover more in the [Key concepts section](/docs/guide/concepts/auto-imports). :: ### Rendering modes @@ -56,7 +56,7 @@ Nuxt offers different rendering modes to accommodate various use-cases: :: ::alert{type="info"} -Read more about [Nuxt rendering modes](/guide/concepts/rendering). +Read more about [Nuxt rendering modes](/docs/guide/concepts/rendering). :: ### Server engine @@ -68,7 +68,7 @@ In development, it uses Rollup and Node.js workers for your server code and cont In production, Nitro builds your app and server into one universal `.output` directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static. ::alert{type="info"} -Read more about [Nuxt server engine](/guide/concepts/server-engine). +Read more about [Nuxt server engine](/docs/guide/concepts/server-engine). :: ### Production-ready @@ -76,7 +76,7 @@ Read more about [Nuxt server engine](/guide/concepts/server-engine). A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers. ::alert{type="info"} -Discover more in the [deployment section](/getting-started/deployment). +Discover more in the [deployment section](/docs/getting-started/deployment). :: ### Modular @@ -84,7 +84,7 @@ Discover more in the [deployment section](/getting-started/deployment). A module system allows to extend Nuxt with custom features and integrations with third-party services. ::alert{type="info"} -Discover more about [modules](/guide/concepts/modules). +Discover more about [modules](/docs/guide/concepts/modules). :: ### Architecture @@ -109,9 +109,9 @@ Nuxt is the backbone of your Vue.js project, giving structure to build your proj Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project. ::alert{type=info icon=πŸ‘} -Ready to try? Head over to the [Installation section](/getting-started/installation). +Ready to try? Head over to the [Installation section](/docs/getting-started/installation). :: ### Contribute -Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide πŸ‘‰](/community/contribution) +Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide πŸ‘‰](/docs/community/contribution) diff --git a/docs/content/1.getting-started/10.deployment.md b/docs/content/1.docs/1.getting-started/10.deployment.md similarity index 92% rename from docs/content/1.getting-started/10.deployment.md rename to docs/content/1.docs/1.getting-started/10.deployment.md index 66845b5845c..8ee9f6a9997 100644 --- a/docs/content/1.getting-started/10.deployment.md +++ b/docs/content/1.docs/1.getting-started/10.deployment.md @@ -81,7 +81,7 @@ There are two ways to deploy a Nuxt application to any static hosting services: ### Crawl-based Pre-rendering -Use the [`nuxi generate` command](/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory. +Use the [`nuxi generate` command](/docs/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory. ```bash npx nuxi generate @@ -89,7 +89,7 @@ npx nuxi generate ### Manual Pre-rendering -You can manually specify routes that [Nitro](/guide/concepts/server-engine) will fetch and pre-render during the build. +You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build. ```ts [nuxt.config.ts|js] defineNuxtConfig({ @@ -115,7 +115,7 @@ defineNuxtConfig({ In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration. -You can explicitly set the desired preset in the [`nuxt.config`](/guide/directory-structure/nuxt.config) file: +You can explicitly set the desired preset in the [`nuxt.config`](/docs/guide/directory-structure/nuxt.config) file: ```js [nuxt.config.js|ts] export default { diff --git a/docs/content/1.getting-started/10.upgrade-guide/_dir.yml b/docs/content/1.docs/1.getting-started/10.upgrade-guide/_dir.yml similarity index 100% rename from docs/content/1.getting-started/10.upgrade-guide/_dir.yml rename to docs/content/1.docs/1.getting-started/10.upgrade-guide/_dir.yml diff --git a/docs/content/1.getting-started/11.upgrade.md b/docs/content/1.docs/1.getting-started/11.upgrade.md similarity index 91% rename from docs/content/1.getting-started/11.upgrade.md rename to docs/content/1.docs/1.getting-started/11.upgrade.md index 3df6a8a467d..768e7beb997 100644 --- a/docs/content/1.getting-started/11.upgrade.md +++ b/docs/content/1.docs/1.getting-started/11.upgrade.md @@ -25,7 +25,7 @@ Options API | βœ… | βœ… | βœ… Components Auto Import | βœ… | βœ… | βœ… ` ``` -:ReadMore{link="/api/composables/use-route"} +:ReadMore{link="/docs/api/composables/use-route"} ## Route Middleware @@ -120,7 +120,7 @@ definePageMeta({ ## Route Validation -Nuxt offers route validation via the `validate` property in [`definePageMeta`](/api/utils/define-page-meta) in each page you wish to validate. +Nuxt offers route validation via the `validate` property in [`definePageMeta`](/docs/api/utils/define-page-meta) in each page you wish to validate. The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, and another match can't be found, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked). diff --git a/docs/content/1.getting-started/5.seo-meta.md b/docs/content/1.docs/1.getting-started/5.seo-meta.md similarity index 95% rename from docs/content/1.getting-started/5.seo-meta.md rename to docs/content/1.docs/1.getting-started/5.seo-meta.md index c997658c299..d79c03c690e 100644 --- a/docs/content/1.getting-started/5.seo-meta.md +++ b/docs/content/1.docs/1.getting-started/5.seo-meta.md @@ -9,7 +9,7 @@ Improve your Nuxt app's SEO with powerful head config, composables and component ## App Head -Providing an [app.head](/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app. +Providing an [app.head](/docs/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app. ::alert{type=info} This method does not allow you to provide reactive data, if you need global reactive data you can use `useHead` in `app.vue`. @@ -42,7 +42,7 @@ export default defineNuxtConfig({ }) ``` -:ReadMore{link="/api/configuration/nuxt-config/#head"} +:ReadMore{link="/docs/api/configuration/nuxt-config/#head"} ## Composable: `useHead` @@ -67,7 +67,7 @@ useHead({ ``` -::ReadMore{link="/api/composables/use-head"} +::ReadMore{link="/docs/api/composables/use-head"} :: ## Components @@ -227,7 +227,7 @@ useHead({ ``` -::LinkExample{link="/examples/composables/use-head"} +::LinkExample{link="/docs/examples/composables/use-head"} :: :ReadMore{link="/guide/directory-structure/pages/#page-metadata"} diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.docs/1.getting-started/5.transitions.md similarity index 94% rename from docs/content/1.getting-started/5.transitions.md rename to docs/content/1.docs/1.getting-started/5.transitions.md index a21006481f7..5592a22c86c 100644 --- a/docs/content/1.getting-started/5.transitions.md +++ b/docs/content/1.docs/1.getting-started/5.transitions.md @@ -9,7 +9,7 @@ Nuxt leverages Vue's [``](https://vuejs.org/guide/built-ins/transiti ## Page transitions -You can enable page transitions to apply an automatic transition for all your [pages](/guide/directory-structure/pages). +You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/pages). ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -19,7 +19,7 @@ export default defineNuxtConfig({ }) ``` -To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app): +To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app): ::code-group @@ -67,7 +67,7 @@ This produces the following result when navigating between pages: -To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/api/utils/define-page-meta) of the page: +To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page: ::code-group @@ -110,7 +110,7 @@ Moving to the about page will add the 3d rotation effect: ## Layout transitions -You can enable layout transitions to apply an automatic transition for all your [layouts](/guide/directory-structure/layouts). +You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/layouts). ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -120,7 +120,7 @@ export default defineNuxtConfig({ }) ``` -To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/guide/directory-structure/app): +To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app): ::code-group @@ -310,7 +310,7 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins ## Dynamic Transitions -To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`. +To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`. ::code-group diff --git a/docs/content/1.getting-started/6.data-fetching.md b/docs/content/1.docs/1.getting-started/6.data-fetching.md similarity index 93% rename from docs/content/1.getting-started/6.data-fetching.md rename to docs/content/1.docs/1.getting-started/6.data-fetching.md index 921d71d9ab5..2569eb7e48b 100644 --- a/docs/content/1.getting-started/6.data-fetching.md +++ b/docs/content/1.docs/1.getting-started/6.data-fetching.md @@ -17,7 +17,7 @@ Within your pages, components and plugins you can use `useFetch` to universally This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type. -::ReadMore{link="/api/composables/use-fetch"} +::ReadMore{link="/docs/api/composables/use-fetch"} :: ### Example @@ -32,14 +32,14 @@ const { data: count } = await useFetch('/api/count') ``` -::LinkExample{link="/examples/composables/use-fetch"} +::LinkExample{link="/docs/examples/composables/use-fetch"} :: ## `useLazyFetch` This composable behaves identically to `useFetch` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function). -::ReadMore{link="/api/composables/use-lazy-fetch"} +::ReadMore{link="/docs/api/composables/use-lazy-fetch"} :: ### Example @@ -76,7 +76,7 @@ You might be asking yourself: what is the difference between `useFetch` and `use In brief, `useFetch` receives a URL and gets that data, whereas `useAsyncData` might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case. :: -::ReadMore{link="/api/composables/use-async-data"} +::ReadMore{link="/docs/api/composables/use-async-data"} :: ### Example @@ -99,14 +99,14 @@ const { data } = await useAsyncData('count', () => $fetch('/api/count')) ``` -::LinkExample{link="/examples/composables/use-async-data"} +::LinkExample{link="/docs/examples/composables/use-async-data"} :: ## `useLazyAsyncData` This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function). -::ReadMore{link="/api/composables/use-lazy-async-data"} +::ReadMore{link="/docs/api/composables/use-lazy-async-data"} :: ### Example @@ -166,7 +166,7 @@ Invalidate the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useL This method is useful if you want to refresh all the data fetching for a current page. -::ReadMore{link="/api/utils/refresh-nuxt-data"} +::ReadMore{link="/docs/api/utils/refresh-nuxt-data"} :: #### Example @@ -192,7 +192,7 @@ Delete cached data, error status and pending promises of `useAsyncData` and `use This method is useful if you want to invalidate the data fetching for another page. -::ReadMore{link="/api/utils/clear-nuxt-data"} +::ReadMore{link="/docs/api/utils/clear-nuxt-data"} :: ## Options API support @@ -220,19 +220,19 @@ Options API support for `asyncData` may well change before the stable release of Using ` ``` -::LinkExample{link="/examples/auto-imports/composables"} +::LinkExample{link="/docs/examples/auto-imports/composables"} :: ## Examples @@ -64,7 +64,7 @@ export const useFoo = () => { ### Access plugin injections -You can access [plugin injections](/guide/directory-structure/plugins#automatically-providing-helpers) from composables: +You can access [plugin injections](/docs/guide/directory-structure/plugins#automatically-providing-helpers) from composables: ```js [composables/test.ts] export const useHello = () => { diff --git a/docs/content/2.guide/2.directory-structure/1.content.md b/docs/content/1.docs/2.guide/2.directory-structure/1.content.md similarity index 92% rename from docs/content/2.guide/2.directory-structure/1.content.md rename to docs/content/1.docs/2.guide/2.directory-structure/1.content.md index a5fd6bbf0ed..e20cae4a0af 100644 --- a/docs/content/2.guide/2.directory-structure/1.content.md +++ b/docs/content/1.docs/2.guide/2.directory-structure/1.content.md @@ -65,7 +65,7 @@ The module automatically loads and parses them. ### Render Pages -To render content pages, add a [catch-all route](/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component: +To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component: ```vue [pages/[...slug].vue]