Nuxt/docs/content/1.docs/0.index.md
Carolina Delerue ea02be17c7
docs: add docs landing page (#9706)
* wip

* wip

* wip

* wip

* docs: add docs landing

* docs: update wording and structure

* docs(landing): minor tweaks

* docs(landing): update links

* docs(landing): update images

* docs(landing): minor tweaks

* docs(landing): update title

* docs(cards): fix cards

* docs(landing): update landing and introduction heros

* docs(landing): add extra slot to avoid hydration mismatch

* docs(theme): bump version to 0.2.1

Co-authored-by: Clément Ollivier <clement.o2p@gmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
2022-12-23 13:15:12 +01:00

5.4 KiB

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

::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. ::: :: ::