Nuxt/docs/content/index.md

192 lines
6.2 KiB
Markdown
Raw Normal View History

---
navigation: false
template: Page
title: The Hybrid Vue Framework
2021-10-12 14:29:08 +00:00
description: 'Build your next application with Vue 3 and experience hybrid rendering, with an improved directory structure and new features Nuxt 3 is an open source framework making web development simple and powerful.'
---
::HomeHero
---
primary:
text: Star on GitHub
url: https://github.com/nuxt/framework
icon: IconGitHub
---
#title
The Hybrid [Vue]{.text-primary} Framework
#description
2021-10-12 14:29:08 +00:00
Build your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features.
Nuxt 3 is an open source framework making web development simple and powerful.
#secondary-button
:button-link[Get started]{ href="/getting-started/quick-start" size="medium" aria-label="Get started" }
::
::home-features{.dark:bg-secondary-darkest .bg-gray-50}
---
category: Discover
---
#title
With new features
#description
Nuxt 3 has been re-architected with a smaller core and optimized for faster performance and better developer experience.
#default
::section-content-item
---
title: Lighter
description: Up to 75x smaller server deployments and smaller client bundle targeting modern browsers.
image: IconFeather
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Faster
description: 'Optimized cold start with dynamic server code-splitting, powered by nitro.'
image: IconRabbit
imageClass: w-10 h-10
---
::
::section-content-item
---
2021-10-12 12:11:34 +00:00
soon: true
title: Hybrid
description: 'Incremental Static Generation and other advanced modes are now possible.'
image: IconHybrid
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Suspense
description: 'Fetch data in any component, before or after navigation.'
image: IconSuspense
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Composition API
description: "Use the Composition API and Nuxt 3's composables for true code re-usability."
image: IconCAPI
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Nuxt CLI
description: 'A new zero-dependency experience for easy scaffolding and module integration.'
image: IconCLI
imageClass: w-10 h-10
---
::
::section-content-item
---
2021-10-12 12:11:34 +00:00
soon: true
title: Nuxt DevTools
description: 'Work faster with info and quick fixes right in the browser.'
image: IconDevtools
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Nuxt Kit
description: 'Brand new module development with TypeScript and cross-version compatibility.'
image: IconKit
imageClass: w-10 h-10
---
::
::section-content-item
---
2022-08-11 10:40:11 +00:00
title: webpack 5
description: 'Faster build time and smaller bundle size, with no configuration required.'
image: IconWebpack
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Vite
description: 'Experience lightning fast HMR by using Vite as your bundler.'
image: IconVite
imageClass: w-10 h-10
---
::
::section-content-item
---
title: Vue 3
description: 'Vue 3 is a solid foundation for your next web app.'
image: IconVue
imageClass: w-10 h-10
---
::
::section-content-item
---
title: TypeScript
description: 'Built with native TypeScript and ESM - no extra steps required.'
image: IconTypeScript
imageClass: w-10 h-10
---
::
#bottom
:button-link[Get started]{ href="/getting-started" size="medium" aria-label="Get started" }
::
::section{.py-20 .text-lg}
::nuxt-container{.text-justify}
:icon-nuxt-nitro{.h-32}
:headline[Nitro Engine]
We worked for 9 months on Nuxt's new server engine for Nuxt: [**Nitro**](/guide/concepts/server-engine). It unlocks new **full-stack capabilities** to Nuxt server and beyond.
In development, it uses [Rollup](https://rollupjs.org/guide/en/) and [Node.js workers](https://nodejs.org/api/worker_threads.html) for your server code and context isolation. It also **generates your server API** by reading files in [`server/api/`](/guide/directory-structure/server#api-routes) and **server middleware** from [`server/middleware/`](/guide/directory-structure/server#server-middleware).
In production, it builds your app and server into one universal [`.output`](/guide/directory-structure/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.
The output is combined with both runtime code to run your Nuxt server in any environment (including experimental browser Service Workers!) and serve you static files, making it a **true hybrid framework** for the JAMStack. In addition, a native storage layer is implemented, supporting multi source, drivers and local assets.
The foundation of the Nitro server is rollup and [h3](https://github.com/unjs/h3): a minimal http framework built for high performance and portability.
:button-link[Learn more about Nitro]{ href="/guide/concepts/server-engine" size="medium" aria-label="Learn more about Nitro" }
::
::
::section{.dark:bg-secondary-darkest .bg-gray-50 .py-20 .text-justify}
::nuxt-container{.text-justify}
:icon-nuxt-bridge{.h-32}
:headline[Nuxt Bridge]
We moved to [Vue 3](https://vuejs.org/) and re-wrote Nuxt after 4 years of development to make it a strong foundation for the future.
### Smooth upgrade to Nuxt 3
We've worked to make the upgrade as easy as possible between Nuxt 2 and Nuxt 3.
::list
- Legacy plugins and modules will keep working
- Nuxt 2 config is compatible
- Partial pages options API available
::
### Bringing Nuxt 3 experience to your existing Nuxt 2 project
As we've been working on new features for Nuxt 3, we've back-ported some of them to Nuxt 2.
::list{.mb-8}
- Using [Nitro server](/guide/concepts/server-engine) with Nuxt 2
- Using Composition API (same as Nuxt 3) with Nuxt 2
- Using new CLI and DevTools with Nuxt 2
- Progressively upgrade to Nuxt 3
- Compatibility with Nuxt 2 module ecosystem
- Upgrade piece by piece (Nitro, Composition API, Nuxt Kit)
::
:button-link[Get started with Nuxt Bridge]{ href="/bridge" size="medium" aria-label="Get started" }
::
::