---
title: Documentation
navigation: false
description: Learn everything you need to know, from beginner to master.
---
<!-- markdownlint-disable -->
<!-- @case-police-disable -->
::docs-hero
#title
Nuxt Docs
#description
Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.
::

::docs-card
---
component: 'div'
descriptionClass: 'w-full sm:w-2/3'
roundedClass: 'rounded-xl'
image:
  path: '/assets/docs/getting-started/views/getting-started'
  width: '100'
  height: '100'
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'
---
#extraTitle
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
  ::docs-landing-list
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/key-concepts-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/key-concepts-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  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.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/directory-structure-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/directory-structure-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  contentClass: 'gap-y-2'
  to: '/docs/guide/directory-structure/nuxt'
  ---
  #title
  Directory Structure
  #description
  Navigate Nuxt directory structure with this handy guide.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/going-further-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/going-further-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  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
  ::docs-landing-list
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/composables-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/composables-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  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.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/components-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/components-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  contentClass: 'gap-y-2'
  to: '/docs/api/components/client-only'
  ---
  #title
  Components
  #description
  Nuxt components, auto-imported and ready to use in your application.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/utils-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/utils-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  contentClass: 'gap-y-2'
  to: '/docs/api/utils/dollarfetch'
  ---
  #title
  Utils
  #description
  Use utility functions to get fine-grained control over your app behavior.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/advanced-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/advanced-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  contentClass: 'gap-y-2'
  to: '/docs/api/advanced/hooks'
  ---
  #title
  Advanced
  #description
  Learn about lifecycle hooks and Kit utilities in the advanced section.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/commands-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/commands-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  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.
  :::
  :::docs-landing-card
  ---
  headerClass: 'justify-start px-4 pt-4 sm:px-6'
  image:
    light: '/assets/docs/getting-started/views/docs-landing/configuration-light.svg'
    dark: '/assets/docs/getting-started/views/docs-landing/configuration-dark.svg'
  imageHeight: '58'
  imageWidth: '52'
  contentClass: 'gap-y-2'
  to: '/docs/api/configuration/nuxt-config'
  ---
  #title
  Configuration
  #description
  Master the Nuxt config file to customize the framework behavior.
  :::
  ::
::