Nuxt/docs/0.index.md
2023-02-14 10:01:35 +00:00

216 lines
4.9 KiB
Markdown

---
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.
::
::card-item{ .mt-4 }
---
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.
:::
::
::