Nuxt/docs/0.index.md

title	navigation	description
Documentation	false	Learn everything you need to know about Nuxt, from beginner to master.

::docs-hero #title Nuxt Docs #description Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. ::

::card-item

is: 'div' gradientBorder: false descriptionClass: 'w-full sm:w-2/3' buttonsWrapperClass: 'pr-[100px] sm:pr-0' backgroundImage: path: '/assets/docs/getting-started/views/getting-started' width: '100' height: '100' format: 'png' buttons:

• label: 'Get started' size: 'sm' variant: 'primary-gradient' to: '/docs/getting-started/introduction'
• label: 'Explore Examples' size: 'sm' variant: 'secondary' to: '/docs/examples/essentials/hello-world'

---

#title Getting Started #description Start by learning Nuxt core features, from installation to deployment. ::

::docs-landing-section #title Guide #description From an idea to a masterpiece, guides take you on the path to becoming a Nuxter. #extra ::card-list :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/key-concepts' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/guide/concepts/auto-imports'

#title Key Concepts #description Get an overview of the concepts that drive the Nuxt experience. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/directory-structure' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/guide/directory-structure/nuxt'

#title Directory Structure #description Navigate Nuxt directory structure with this handy guide. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/going-further' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/guide/going-further/internals'

#title Going further #description Deep dive into Nuxt internals to master all the features. ::: :: ::

::docs-landing-section #title API #description Every Nuxt components, composables and utilities, in details. #extra ::card-list :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/composables' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/composables/use-app-config'

#title Composables #description From data fetching to error handling, get familiar with Nuxt built-in composables. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/components' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/components/client-only'

#title Components #description Nuxt components, auto-imported and ready to use in your application. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/utils' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/utils/dollarfetch'

#title Utils #description Use utility functions to get fine-grained control over your app behavior. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/advanced' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/advanced/hooks'

#title Advanced #description Learn about lifecycle hooks and Kit utilities in the advanced section. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/commands' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/commands/add'

#title Commands #description Meet Nuxi, Nuxt 3 command-line tool. The essential companion in your journey. ::: :::card-item

gradientBorder: false headerClass: 'justify-start px-4 pt-4 sm:px-6' image: path: '/assets/docs/getting-started/views/docs-landing/configuration' width: '52' height: '58' format: 'svg' contentClass: 'gap-y-2' to: '/docs/api/configuration/nuxt-config'

#title Configuration #description Master the Nuxt config file to customize the framework behavior. ::: :: ::