docs(introduction): add nuxt key features to the introduction (#8013)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
This commit is contained in:
Clément Ollivier 2022-10-06 18:00:03 +02:00 committed by GitHub
parent 9d7871f4f0
commit ce456f8ed9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 13 deletions

View File

@ -10,3 +10,5 @@ MD024:
MD025: false MD025: false
# Allow inline HTML # Allow inline HTML
MD033: false MD033: false
# Allow non blank lines around list
MD032: false

View File

@ -4,15 +4,15 @@ titleTemplate: '%s'
description: Nuxt's goal is to make web development intuitive and performant with a great DX in mind. description: Nuxt's goal is to make web development intuitive and performant with a great DX in mind.
--- ---
# What is Nuxt? # Introduction
Nuxt's goal is to make web development intuitive and performant with a great developer experience in mind. 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.
## Why Nuxt? ## What is Nuxt?
To understand what Nuxt is, we need to understand what we need to create a modern application: To understand what Nuxt is, we need to understand what we need to create a modern application:
::list{type=success}
::list{type=success}
- A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org). - A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org).
- A bundler to support hot module replacement in development and bundle your code for production, we support both [webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/). - A bundler to support hot module replacement in development and bundle your code for production, we support both [webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
- A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that. - A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
@ -22,15 +22,76 @@ To understand what Nuxt is, we need to understand what we need to create a moder
This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application. This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.
Nuxt takes care of this so you can focus on what matters: **creating your web application**. Nuxt takes care of this and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
On top of this setup, Nuxt provides a [directory structure](/guide/directory-structure) to follow, focused on specific features to keep your focus on creating, not configuring. ### View engine
## How Does It Work? Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/guide/concepts/vuejs-development).
### Automation and conventions
Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on what matters. The configuration file can still customize and override its default behaviors.
::list{type=success}
- Auto-imports
- File-system routing and API layer
- Data-fetching utilities
- Zero-config Typescript support
- Configured build tools
::
::alert{type="info"}
Discover more in the [Key concepts section](/guide/concepts/auto-imports).
::
### Rendering modes
Nuxt offers different rendering modes to accomodate various use-cases:
::list{type=success}
- Universal rendering (Server-side rendering and hydration)
- Client-side only rendering
- Full Static site generation
- Hybrid rendering (per-routes caching strategy)
::
::alert{type="info"}
Read more about [Nuxt rendering modes](/guide/concepts/rendering).
::
### Server engine
The Nuxt server engine [Nitro](https://nitro.unjs.io) unlocks new full-stack capabilities.
In development, it uses Rollup and Node.js workers for your server code and context isolation. It also generates your server API by reading files in `server/api/` and server middleware from `server/middleware/`.
In production, Nitro builds your app and server into one universal `.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.
::alert{type="info"}
Read more about [Nuxt server engine](/guide/concepts/server-engine).
::
### Production-ready
A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers.
::alert{type="info"}
Discover more in the [deployment section](/getting-started/deployment).
::
### Modular
A module system allows to extend Nuxt with custom features and integrations with third-party services.
::alert{type="info"}
Discover more about [modules](/guide/concepts/modules).
::
### Architecture
Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages): Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages):
::list{type=info}
::list{type=info}
- Core Engine: [nuxt](https://github.com/nuxt/framework/tree/main/packages/nuxt) - Core Engine: [nuxt](https://github.com/nuxt/framework/tree/main/packages/nuxt)
- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/framework/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/framework/tree/main/packages/webpack) - Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/framework/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/framework/tree/main/packages/webpack)
- Command line interface: [nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi) - Command line interface: [nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi)
@ -41,16 +102,16 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/framework/
We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package. We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
## Are You Nuxt? ## Are you Nuxt?
Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility. Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project. Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
::alert{type=info icon=👍} ::alert{type=info icon=👍}
Ready to try? Head over to the [Installation section](/getting-started/installation). Ready to try? Head over to the [Installation section](/getting-started/quick-start).
:: ::
### Are You *Courageously* Nuxt? ### Contribute
Take a stab at an open [issue](https://github.com/nuxt/framework/issues). This is the best way to learn Nuxt, by actually diving into the code. You may even bring an approach or alternative solution that makes Nuxt even better! So, what are you waiting for? Let's go! Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide 👉](/community/contribution)

View File

@ -124,7 +124,7 @@ We recommend the following libraries which are used throughout the ecosystem:
#### Use ESM Syntax and Default to `type: module` #### Use ESM Syntax and Default to `type: module`
Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/concepts/esm). Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/guide/concepts/esm).
#### What's Corepack #### What's Corepack