chore(docs): add code format using markdownlint (#1498) (#1556)

This commit is contained in:
Levi (Nguyễn Lương Huy) 2021-10-29 18:26:01 +07:00 committed by GitHub
parent c420e46efe
commit 4c17b92b66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 345 additions and 141 deletions

View File

@ -30,6 +30,9 @@ jobs:
- name: Lint
run: yarn lint
- name: Lint (docs)
run: yarn lint:docs
test:
runs-on: ${{ matrix.os }}

12
.markdownlint.yml Normal file
View File

@ -0,0 +1,12 @@
# Default state for all rules
default: true
# Disable max line length
MD013: false
# Allow duplicated heading for different sections
MD024:
allow_different_nesting: true
siblings_only: true
# Allow multiple top-level headings
MD025: false
# Allow inline HTML
MD033: false

4
.markdownlintignore Normal file
View File

@ -0,0 +1,4 @@
**/node_modules
docs/content/index.md
docs/content/**/15.nuxt.config.md

View File

@ -28,9 +28,10 @@ Next, decide whether to start from scratch or upgrade an existing Nuxt 2 project
### Starting a fresh Nuxt project
::list{type=info}
- Enjoy using Vue 3
- All the new composables are available
- New templating system and conventions are enabled
* Enjoy using Vue 3
* All the new composables are available
* New templating system and conventions are enabled
::
::alert{icon=👉}
@ -42,12 +43,13 @@ Checkout the [Installation section](/getting-started/installation).
If you have an existing Nuxt 2 project, we **strongly recommend** you begin by using Nuxt Bridge. This way you can try most new features while keeping breaking changes to a minimum.
::list{type=info}
- It's risk free! You can always remove the module from your config
- Makes your project (almost) ready for Nuxt 3
- Enjoy new DX improvements without major rewrites for Vue 3
- Use Nitro engine for platform-agnostic and optimized deployments
- Help us stabilize Nuxt 3 and discover flaws
- Nuxt Bridge is more stable than Nuxt 3 at the moment
* It's risk free! You can always remove the module from your config
* Makes your project (almost) ready for Nuxt 3
* Enjoy new DX improvements without major rewrites for Vue 3
* Use Nitro engine for platform-agnostic and optimized deployments
* Help us stabilize Nuxt 3 and discover flaws
* Nuxt Bridge is more stable than Nuxt 3 at the moment
::
::alert{icon=👉}
@ -56,7 +58,7 @@ Checkout the [Bridge installation section](/getting-started/bridge).
### Comparison
In the table below, there is a quick comparison between 3 versions of nuxt:
In the table below, there is a quick comparison between 3 versions of Nuxt:
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
-------------------------|-----------------|------------------|---------

View File

@ -11,8 +11,8 @@ Learn more in [Introduction](/getting-started/introduction).
You can start playing with Nuxt 3 in your browser using our online sandboxes:
:button-link[Play on StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz blank}
:button-link[Play on CodeSandBox]{href=https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox blank}
:button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank}
:button-link[Play on CodeSandBox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
## New project
@ -31,12 +31,15 @@ code -r nuxt3-app
Install the dependencies:
::code-group
```bash [Yarn]
yarn install
```
```bash [NPM]
npm install
```
::
## Development server
@ -44,16 +47,19 @@ npm install
Now you'll be able to use `yarn dev` to start your nuxt app in development mode:
::code-group
```bash [Yarn]
yarn dev -o
```
```bash [NPM]
npm run dev -- -o
```
::
::alert{type=success icon=✨ .font-bold}
Well done! A browser window should automatically open for http://localhost:3000
Well done! A browser window should automatically open for <http://localhost:3000>
::
## Next steps

View File

@ -11,14 +11,11 @@ Bridge is a forward-compatibility layer that allows you to experience many of ne
Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and have the best developer experience without needing a major rewrite or risk breaking changes.
### Upgrade Nuxt 2
## Upgrade Nuxt 2
Remove any package lock files (`package-lock.json` and `yarn.lock`) and use the latest `nuxt-edge`:
**package.json**
```diff
```diff [package.json]
- "nuxt": "^2.15.0"
+ "nuxt-edge": "latest"
```
@ -26,36 +23,42 @@ Remove any package lockfiles (`package-lock.json` and `yarn.lock`) and use the l
Then, reinstall your dependencies:
::code-group
```bash [Yarn]
yarn install
```
```bash [NPM]
npm install
```
::
::alert
Once the installation is complete, make sure both development and production builds are working as expected before proceeding.
::
### Install Nuxt Bridge
## Install Nuxt Bridge
Install `@nuxt/bridge-edge` as a development dependency:
::code-group
```bash [Yarn]
yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge
```
```bash [NPM]
npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
```
::
### Update your scripts
## Update your scripts
You will also need to update your scripts within your `package.json` to reflect the fact that Nuxt will now produce a Nitro server as build output.
#### Nuxi
### Nuxi
Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/getting-started/commands/). Update your scripts as follows to leverage the better support from Nuxt Bridge:
@ -72,11 +75,11 @@ Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/getting-started/commands/).
}
```
#### Static target
### Static target
If you have set `target: 'static'` in your `nuxt.config` then you need to ensure that you update your build script to be `nuxi generate`.
```json
```json [package.json]
{
"scripts": {
"build": "nuxi generate"
@ -84,11 +87,11 @@ If you have set `target: 'static'` in your `nuxt.config` then you need to ensure
}
```
#### Server target
### Server target
For all other situations, you can use the `nuxi build` command.
```json
```json [package.json]
{
"scripts": {
"build": "nuxi build",
@ -97,7 +100,7 @@ For all other situations, you can use the `nuxi build` command.
}
```
### Update `nuxt.config`
## Update `nuxt.config`
Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
@ -111,53 +114,60 @@ export default defineNuxtConfig({
})
```
### Update `tsconfig.json`
## Update `tsconfig.json`
If you are using TypeScript, you can edit your `tsconfig.json` to benefit from autogenerated Nuxt types:
If you are using TypeScript, you can edit your `tsconfig.json` to benefit from auto-generated Nuxt types:
**tsconfig.json**
```diff
```diff [tsconfig.json]
{
+ "extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
...
}
}
```
### Avoid CommonJS syntax
## Avoid CommonJS syntax
Nuxt 3 natively supports TypeScript and ECMAScript Modules.
#### Update the imports
### Update the imports
::code-group
```js [Before]
const lib = require('lib')
```
```js [After]
import lib from 'lib'
// or using code-splitting
const lib = await import('lib').then(e => e.default || e)
```
::
#### Update the exports
### Update the exports
::code-group
```js [Before]
module.exports = ...
```
```js [After]
export default ...
// or using named export
export const hello = ...
```
::
#### Avoid using specific CJS syntax
### Avoid using specific CJS syntax
Avoid the usage of `__dirname` and `__filename` as much as possible.
### Remove incompatible and obsolete modules
## Remove incompatible and obsolete modules
- Remove `@nuxt/content` (1.x). A rewrite for nuxt 3 is planned (2.x)
- Remove `nuxt-vite`: Bridge enables same functionality
@ -166,11 +176,11 @@ Avoid the usage of `__dirname` and `__filename` as much as possible.
- Remove `@nuxt/nitro`: Bridge injects same functionality
- Remove `@nuxtjs/composition-api` from your dependencies (and from your modules in `nuxt.config`). Bridge provides a legacy composition API layer that handles imports within your files from `@nuxtjs/composition-api` until you've fully finished migrating to native Bridge/Nuxt 3 composables (which you will import from by `#app`, or via auto-imports).
### Exclude Nuxt build folder from git
## Exclude Nuxt build folder from git
Add the folder `.output` to the `.gitignore` file.
### Ensure everything goes well
## Ensure everything goes well
✔️ Try with `nuxt dev` and `nuxt build` (or `nuxt generate`) to see if everything goes well.

View File

@ -6,7 +6,7 @@ Nuxt 3 has two main commands, one to start development server and one to make pr
Since Nuxt 3 becomes a dev dependency thanks to the new [Nitro server](/concepts/server-engine), you only need to add two commands in your `package.json`:
```json
```json [package.json]
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
@ -17,15 +17,18 @@ Then, you can run each command using `npm run <command>` or `yarn <command>`.
## Development Server
To start Nuxt in development mode with hot module replacement on http://localhost:3000:
To start Nuxt in development mode with hot module replacement on <http://localhost:3000>:
::code-group
```bash [Yarn]
yarn dev
```
```bash [NPM]
npm run dev
```
::
## Building for production
@ -33,12 +36,15 @@ npm run dev
To build your Nuxt application for production, run:
::code-group
```bash [Yarn]
yarn build
```
```bash [NPM]
npm run build
```
::
Nuxt will create a [`.output`](/docs/directory-structure/output) directory with all your application, server and dependencies ready to be deployed. Checkout the [deployment](/docs/deployment) section to learn where and how you can deploy a Nuxt application using Nitro.

View File

@ -12,6 +12,7 @@ Some features have been dropped from Nuxt 2, some are yet to be implemented for
Noticeable and/or breaking changes for Nuxt 3 other than the requirements of Nuxt Bridge are:
::list{type=warning}
- Vue app templates are rewritten
- Vue upgraded to `3.x`
- Using `<Suspense>` for async data fetching
@ -22,7 +23,7 @@ Noticeable and/or breaking changes for Nuxt 3 other than the requirements of Nux
- The [`pages/` directory](/docs/directory-structure/pages) conventions changed
::
In table below there is an overall feature comparation table:
In table below there is an overall feature comparison table:
Feature / Version | Nuxt 2 | Nuxt 3 | Changes required
--------------------------|---------|----------|------------------
@ -77,27 +78,33 @@ Nuxt 3 natively supports TypeScript and ECMAScript Modules.
#### Update the imports
::code-group
```js [Before]
const lib = require('lib')
```
```js [After]
import lib from 'lib'
// or using code-splitting
const lib = await import('lib').then(e => e.default || e)
```
::
#### Update the exports
::code-group
```js [Before]
module.exports = ...
```
```js [After]
export default ...
// or using named export
export const hello = ...
```
::
#### Avoid using specific CJS syntax
@ -109,6 +116,7 @@ Avoid the usage of `__dirname` and `__filename` as much as possible.
If you inject a Nuxt plugin that does not have `export default` (such as global Vue plugins), ensure you add `export default () => { }` to the end of it.
::code-group
```js [Before]
// ~/plugins/vuelidate.js
import Vue from 'vue'
@ -116,6 +124,7 @@ import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
```
```js [After]
// ~/plugins/vuelidate.js
import Vue from 'vue'
@ -125,6 +134,7 @@ Vue.use(Vuelidate)
export default () => { }
```
::
### Avoid runtime modules

View File

@ -6,6 +6,7 @@ Nuxt goal is to make web development intuitive and performant with a great devel
To understand what is Nuxt, we need to understand what we need to create a modern application:
::list{type=success}
- 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 transpiler in order to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
@ -23,6 +24,7 @@ On top of this setup, Nuxt provides a [directory structure](/docs/directory-stru
Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages):
::list{type=info}
- Core Engine: [nuxt3](https://github.com/nuxt/framework/tree/main/packages/nuxt3)
- 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)

View File

@ -4,6 +4,7 @@ Nuxt 3 is powered by a new server engine, code-named "Nitro".
This engine has many benefits:
::list
- Cross-platform support for Node.js, Browsers, service-workers and more
- Serverless support out-of-the-box
- API routes support
@ -18,13 +19,12 @@ Server [API endpoints](/docs/directory-structure/server#api-routes) and [Middlew
There are a number of key features, including:
* Handlers can directly return objects/arrays for an automatically-handled JSON response
* Handlers can return promises, which will be awaited (`res.end()` and `next()` are also supported)
* Helper functions for body parsing, cookie handling, redirects, headers and more
- Handlers can directly return objects/arrays for an automatically-handled JSON response
- Handlers can return promises, which will be awaited (`res.end()` and `next()` are also supported)
- Helper functions for body parsing, cookie handling, redirects, headers and more
Check out [the h3 docs](https://github.com/unjs/h3) for more information.
::alert{type="info" icon=}
Learn more about the API layer in the [`server/`](/docs/directory-structure/server) directory.
::
@ -35,8 +35,8 @@ Nitro allows 'direct' calling of routes via the globally-available `$fetch` help
`$fetch` API is using [ohmyfetch](https://github.com/unjs/ohmyfetch), with key features including:
* Automatic parsing of JSON responses (with access to raw response if needed)
* Request body and params are automatically handled, with correct `Content-Type` headers being added
- Automatic parsing of JSON responses (with access to raw response if needed)
- Request body and params are automatically handled, with correct `Content-Type` headers being added
For more information on `$fetch` features, check out [ohmyfetch](https://github.com/unjs/ohmyfetch).
@ -54,7 +54,7 @@ The server in Nuxt 2 is not standalone, but requires part of nuxt core to be inv
This dist is generated when running `nuxt build` into a [`.output`](/docs/directory-structure/output) directory.
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 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.
::alert{type="info" icon=IconCode}
Checkout the Nitro engine on GitHub: [framework/packages/nitro](https://github.com/nuxt/framework/tree/main/packages/nitro)

View File

@ -8,7 +8,7 @@ When you run `nuxi dev` or `nuxi build`, the following files are generated for I
### `.nuxt/nuxt.d.ts`
This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognise these types automatically.
This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognize these types automatically.
Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
@ -18,7 +18,6 @@ This file contains the recommended basic TypeScript configuration for your proje
[Read more about how to extend this configuration](/docs/directory-structure/tsconfig).
::alert{icon=👉}
Nitro also [auto-generates types](/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/directory-structure/composables), plus other core functionality.
::

View File

@ -15,10 +15,10 @@ useAsyncData(key: string, fn: () => Object, options?: { defer: boolean, server:
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
* **fn** an asynchronous function that returns a value.
* **options**:
- _defer_: whether to load the route before resolving the async function (defaults to `false`)
- _server_: whether the fetch the data on server-side (defaults to `true`)
- _transform_: A function that can be used to alter fn result after resolving
- _pick_: Only pick specified keys in this array from fn result
* _defer_: whether to load the route before resolving the async function (defaults to `false`)
* _server_: whether the fetch the data on server-side (defaults to `true`)
* _transform_: A function that can be used to alter fn result after resolving
* _pick_: Only pick specified keys in this array from fn result
Under the hood, `defer: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `defer: true` and implementing a loading state instead for a snappier user experience.
@ -48,23 +48,24 @@ Within your pages, components and plugins you can use `useFetch` to get universa
This composable provides a convenient wrapper around `useAsyncData` and `$fetch` and automatically generates a key based on url and fetch options and infers API response type.
Usage:
### Usage
```ts
useFetch(url: string, options?)
```
Available options:
- `key`: Provide a custom key
- Options from [ohmyfetch](https://github.com/unjs/ohmyfetch)
- `method`: Request method
- `params`: Query params
- `baseURL`: Base URL for request
- Options from `useAsyncData`
- `defer`
- `server`
- `pick`
- `transform`
* `key`: Provide a custom key
* Options from [ohmyfetch](https://github.com/unjs/ohmyfetch)
* `method`: Request method
* `params`: Query params
* `baseURL`: Base URL for request
* Options from `useAsyncData`
* `defer`
* `server`
* `pick`
* `transform`
### Example

View File

@ -8,7 +8,6 @@ Within your pages, components and plugins you can use `useState`. It can be used
You can think of it as an SSR-friendly ref in that its value will be hydrated (preserved) after server-side rendering. It is shared across all components.
### Usage
```js

View File

@ -7,7 +7,8 @@ You can customize the meta tags for your site through several different ways:
Within your `setup()` function you can call `useMeta` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
For example:
```ts
```js
export default {
setup () {
useMeta({

View File

@ -19,7 +19,6 @@ function useMyComposable () {
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/docs/directory-structure/plugins)
## Providing helpers
You can provide helpers to be usable across all composables and application. This usually happens within a nuxt plugin.

View File

@ -24,7 +24,7 @@ Each file should export a default function that handles api requests. It can ret
export default (req, res) => 'Hello World'
```
See result on http://localhost:3000/api/hello
See result on <http://localhost:3000/api/hello>
#### Async function

View File

@ -9,6 +9,7 @@ head.title: Assets directory
The `assets/` directory is used to add all the website assets that will be processed by the build tool (Webpack or Vite).
The directory usually contain such files:
- Stylesheets (CSS, SASS, etc.)
- Fonts
- Images that won't be served from the [`public/`](/docs/directory-structure/public) directory.

View File

@ -141,4 +141,3 @@ And directly use the module components (prefixed with `awesome-`), our `pages/in
```
It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.

View File

@ -8,7 +8,6 @@ head.title: Composables directory
Nuxt 3 supports `composables/` directory to auto import your Vue composables into your application and use using auto imports!
Example: (using named exports)
```js [composables/useFoo.ts]
@ -43,4 +42,3 @@ You can now auto import it:
const foo = useFoo()
</script>
```

View File

@ -12,7 +12,7 @@ Page layouts are placed in the `layouts/` directory and will be automatically lo
If you have only single layout for application, you can alternatively use [app.vue](/docs/directory-structure/app).
### Example: a custom layout
## Example: a custom layout
```bash
-| layouts/
@ -40,7 +40,7 @@ export default {
</script>
```
### Example: using with slots
## Example: using with slots
You can also take full control (for example, with slots) by using the `<NuxtLayout>` component (which is globally available throughout your application) and set `layout: false` in your component options.
@ -60,7 +60,7 @@ export default {
</script>
```
### Example: using with `<script setup>`
## Example: using with `<script setup>`
If you are utilizing Vue `<script setup>` [compile-time syntactic sugar](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup), you can use a secondary `<script>` tag to set `layout` options as needed.

View File

@ -40,7 +40,7 @@ Given the example above, you can access group/id within your component via the `
Navigating to `/users-admins/123` would render:
```
```text
admins 123
```
@ -88,7 +88,7 @@ To display the `child.vue` component, simply put the `<NuxtChild>` component ins
The example file tree above should generate these routes:
```ts
```js
[
{
path: '/parent',

View File

@ -9,6 +9,7 @@ How to deploy Nuxt to Azure Static Web Apps or Azure Functions.
## Azure Functions
::list
- Support for serverless SSR build
- No configuration required
- Static assets served from Azure Function
@ -40,11 +41,12 @@ cd .output
func start
```
You can now visit http://localhost:7071/ in your browser and browse your site running locally on Azure Functions.
You can now visit <http://localhost:7071/> in your browser and browse your site running locally on Azure Functions.
### Deploy from your local machine
To deploy, just run the following command:
```bash
# To publish the bundled zip file
az functionapp deployment source config-zip -g <resource-group> -n <app-name> --src dist/deploy.zip
@ -117,7 +119,7 @@ Consider [turning on immutable packages](https://docs.microsoft.com/en-us/azure/
### Demo
A live demo is available on https://nuxt-nitro.azurewebsites.net/
A live demo is available on <https://nuxt-nitro.azurewebsites.net/>
## Azure Static Web Apps
@ -128,6 +130,7 @@ Azure Static Web Apps currently defaults to a Node.js 12.x runtime, which means
How to deploy Nuxt to Azure Static Web Apps with Nuxt Nitro.
::list
- Support for serverless SSR build
- Auto-detected when deploying
- Minimal configuration required
@ -168,9 +171,10 @@ output_location: '.output/public'
###### End of Repository/Build Configurations ######
```
**Note**
#### Note
Pending an update in the [Azure Static Web Apps workflow](https://github.com/Azure/static-web-apps-deploy), you will also need to run the following in your root directory:
```bash
mkdir -p .output/server
touch .output/server/.gitkeep

View File

@ -7,6 +7,7 @@ icon: LogoCloudFlare
How to deploy Nuxt to Cloudflare Workers.
::list
- Support for Workers build output
- Zero millisecond cold start with edge-side rendering
- Minimal configuration required
@ -132,4 +133,4 @@ See [more information on the service worker preset](/docs/deployment/presets/ser
## Demo
A live demo is available on https://nitro-demo.nuxt.workers.dev/
A live demo is available on <https://nitro-demo.nuxt.workers.dev/>

View File

@ -7,6 +7,7 @@ icon: LogoFirebase
How to deploy Nuxt to Firebase Hosting.
::list
- Support for serverless build
- Minimal configuration required
::
@ -22,6 +23,7 @@ Nitro supports [Firebase Hosting](https://firebase.google.com/docs/hosting) with
If you don't already have a `firebase.json` in your root directory, Nitro will create one the first time you run it. All you will need to do is edit this to replace `<your_project_id>` with the project ID that you have chosen on Firebase.
This file should then be committed to version control. You can also create a `.firebaserc` file if you don't want to manually pass your project ID to your `firebase` commands (with `--project <your_project_id>`):
```json [.firebaserc]
{
"projects": {
@ -33,12 +35,15 @@ This file should then be committed to version control. You can also create a `.f
Then, just add Firebase dependencies to your project:
::code-group
```bash [Yarn]
yarn add --dev firebase-admin firebase-functions firebase-functions-test
```
```bash [NPM]
npm install -D firebase-admin firebase-functions firebase-functions-test
```
::
### Using Firebase CLI
@ -48,12 +53,15 @@ You may instead prefer to set up your project with the `firebase` CLI, which wil
#### Install firebase CLI globally
::code-group
```bash [Yarn]
yarn global add firebase-tools
```
```bash [NPM]
npm install -g firebase-tools
```
::
#### Initialize your firebase project
@ -66,6 +74,7 @@ firebase init hosting
When prompted, you can enter `.output/public` as the public directory. **Don't** select that this will be a single-page app.
Once complete, add the following to your `firebase.json` to enable server rendering in Cloud Functions:
```json [firebase.json]
{
"functions": { "source": ".output/server" },
@ -102,4 +111,4 @@ firebase deploy
## Demo site
A live demo is available on https://nitro-demo-dfabe.web.app
A live demo is available on <https://nitro-demo-dfabe.web.app>

View File

@ -7,6 +7,7 @@ icon: LogoNetlify
How to deploy Nuxt to Netlify.
::list
- Support for serverless SSR build
- Auto-detected when deploying
- No configuration required
@ -26,4 +27,4 @@ See [more information on the Lambda preset](/docs/deployment/presets/lambda) for
## Demo
A live demo is available on https://nitro-demo.netlify.app/
A live demo is available on <https://nitro-demo.netlify.app/>

View File

@ -7,6 +7,7 @@ icon: LogoPM2
How to deploy Nuxt to a Node.js hosting using PM2.
::list
- Support for ultra-minimal SSR build
- Zero millisecond cold start
- More configuration required
@ -16,7 +17,7 @@ How to deploy Nuxt to a Node.js hosting using PM2.
Make sure another preset isn't set in `nuxt.config`.
```ts [nuxt.config.js|ts]
```js [nuxt.config.js|ts]
export default {
nitro: {
// this is the default preset so you can also just omit it entirely

View File

@ -7,6 +7,7 @@ icon: LogoVercel
How to deploy Nuxt to Vercel.
::list
- Support for serverless build
- Auto-detected when deploying
- No configuration required
@ -26,4 +27,4 @@ See [more information on the node preset](/docs/deployment/presets/node) for ful
## Demo
A live demo is available at https://nitro-demo.vercel.app/
A live demo is available at <https://nitro-demo.vercel.app/>

View File

@ -7,6 +7,7 @@ icon: IconPresets
Nuxt has four provided generic presets that you can use out-of-the-box.
::list{type=success}
- [Node.js server *(default)*](/docs/deployment/presets/server)
- [Node.js function](/docs/deployment/presets/node)
- [Lambda function](/docs/deployment/presets/lambda)

View File

@ -3,6 +3,7 @@
Get full control of Nuxt Nitro output to deploy on any kind of hosting platform.
::list{type=info}
- Allows full customization
- This is an advanced usage pattern
::

View File

@ -3,6 +3,7 @@
Discover the Node.js function preset with Nitro to attach Nuxt as a middleware to any Node.js server.
::list
- Compatible with many Node.js servers
- Drop-in usage with express or native http server
- Loads only the chunks required to render the request for optimal cold start timing
@ -14,9 +15,9 @@ Back to [presets list](/docs/deployment/presets).
## Usage
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
```ts [nuxt.config.js|ts]
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'node'
@ -42,7 +43,7 @@ It is not recommended to use this preset directly, and particularly not with a 3
### Express middleware
```ts
```js
import express from 'express'
import handler from './.output/server'
@ -54,11 +55,10 @@ app.listen(3000)
### Node server
```ts
```js
import { createServer } from 'http'
import handler from './.output/server'
const server = createServer(handler)
server.listen(8080)
```

View File

@ -3,6 +3,7 @@
Discover the Node.js server preset with Nitro to deploy on any Node hosting.
::list
- **Default preset** if none is specified or auto-detected <br>
- Loads only the required chunks to render the request for optimal cold start timing <br>
- Useful for debugging
@ -14,9 +15,9 @@ Back to [presets list](/docs/deployment/presets).
## Usage
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
```ts [nuxt.config.js|ts]
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'server'
@ -49,7 +50,7 @@ Listening on http://localhost:3000
You can enable the `nitro.timing` option in order to have the logs about the chunk loading and cold start performance.
```ts [nuxt.config.js|ts]
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'server',

View File

@ -3,6 +3,7 @@
Explore the Service worker preset with Nitro to push the boundaries of Nuxt rendering to the edge.
::list
- Can be used for edge-side rendering
- No dependency on Node.js
- No Node.js environment and features
@ -18,9 +19,9 @@ Deployment as service worker has some limitations since SSR code is not running
## Usage
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicity set the preset to use:
You can use the [Nuxt config](/docs/directory-structure/nuxt.config) to explicitly set the preset to use:
```ts [nuxt.config.js|ts]
```js [nuxt.config.js|ts]
export default {
nitro: {
preset: 'worker'

View File

@ -20,12 +20,12 @@ Start with the Nuxt 3 or Nuxt Bridge sandbox and add the **minimum** amount of c
**Nuxt 3**:
:button-link[Nuxt 3 on StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz blank}
:button-link[Nuxt 3 on CodeSandBox]{href=https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox blank}
:button-link[Nuxt 3 on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank}
:button-link[Nuxt 3 on CodeSandBox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
**Nuxt Bridge**:
:button-link[Nuxt Bridge on CodeSandBox]{href=https://codesandbox.io/s/github/nuxt/starter/tree/bridge-codesandbox blank}
:button-link[Nuxt Bridge on CodeSandBox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/bridge-codesandbox" blank}
Once you've reproduced the issue, remove as much code from your reproduction as you can (while still recreating the bug). The time spent making the reproduction as minimal as possible will make a huge difference to whoever sets out to fix the issue.

View File

@ -28,7 +28,7 @@ Before you fix a bug or add a feature, ensure there's an issue that describes it
3. Check out a branch where you can work and commit your changes:
```
```bash
git checkout -b my-new-branch
```

View File

@ -7328,10 +7328,10 @@ mlly@^0.3.0:
resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.0.tgz#5705b2a95551d79ad33feedc046daf7c6d079748"
integrity sha512-6XphOVPsnIzuqNYlcZPMJhaMDDdrEgbLUlA7BPis8O0kkLPbOVA8GcXGeICGcnDotCtTkxAEWBT+FlhywrXTmg==
mlly@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.1.tgz#2429360aadd06b65fc5a26e519ee8a40b2561b9a"
integrity sha512-dtEsZue7NJy5Hhk6dsMoBjmJoZIZwyWvdN+X61cEtqjDFVRUskhWDBmn5EofDUWOkPrwur6GgpCRkXOAB4ISVw==
mlly@^0.3.6, mlly@^0.3.9:
version "0.3.10"
resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.10.tgz#cf3353565c84e951311c46c8d2c8b320d90f9eb3"
integrity sha512-vD3A7naDtIOqHYZhnYUrECRO6UODWNqz6T0TS/pxwolzVoWKX/mXJF1XSM3qxruCDtkzJbzJPgesByihY/r3EA==
move-concurrently@^1.0.1:
version "1.0.1"
@ -8165,12 +8165,13 @@ pkg-types@^0.2.1:
dependencies:
jsonc-parser "^3.0.0"
pkg-types@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.2.3.tgz#4355ee06518b278ae6473d1c1eaf35010d6cf798"
integrity sha512-c05moyQEGO1z16NjidOZn2wQjuAi8CZKzPXmZBWLnnL3dRqDmeMWx3IxVSuYF7zKHkjQFJ9QH3Pas772a4iXQA==
pkg-types@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.3.1.tgz#d7a8b69efb8777a05afc5aabfc259a29a5d6d159"
integrity sha512-BjECNgz/tsyqg0/T4Z/U7WbFQXUT24nfkxPbALcrk/uHVeZf9MrGG4tfvYtu+jsrHCFMseLQ6woQddDEBATw3A==
dependencies:
jsonc-parser "^3.0.0"
mlly "^0.3.6"
pathe "^0.2.0"
plausible-tracker@^0.3.1:

View File

@ -18,6 +18,7 @@
"example": "yarn workspace example-$0 dev",
"example:build": "yarn workspace example-$0 build",
"lint": "eslint --ext .vue,.ts,.js .",
"lint:docs": "./node_modules/.bin/markdownlint ./",
"test": "yarn lint && yarn test:presets",
"test:presets": "mocha test/presets/*.mjs",
"test:bridge:webpack": "TEST_BRIDGE=1 yarn test:presets",
@ -46,6 +47,7 @@
"globby": "^11.0.4",
"jiti": "^1.12.9",
"lerna": "^4.0.0",
"markdownlint-cli": "^0.29.0",
"miniflare": "^1.4.1",
"mocha": "^9.1.3",
"object-hash": "^2.2.0",

View File

@ -1,5 +1,5 @@
## Nuxt Bridge
# Nuxt Bridge
> Use backported Nuxt 3 features in Nuxt 2
Learn more about this package: https://v3.nuxtjs.org/getting-started/bridge
Learn more about this package: <https://v3.nuxtjs.org/getting-started/bridge>

View File

@ -1,5 +1,5 @@
## Nuxt Kit
# Nuxt Kit
> Toolkit for authoring Nuxt Modules
Learn more about this package: https://v3.nuxtjs.org
Learn more about this package: <https://v3.nuxtjs.org>

View File

@ -1,5 +1,5 @@
## Nitro
# Nitro
> The Server engine for Nuxt
Learn more about this package: https://v3.nuxtjs.org/concepts/server-engine
Learn more about this package: <https://v3.nuxtjs.org/concepts/server-engine>

View File

@ -1,5 +1,5 @@
## Nuxi
# Nuxi
> Nuxt Command Line Interface
Learn more about this package: https://v3.nuxtjs.org/getting-started/commands
Learn more about this package: <https://v3.nuxtjs.org/getting-started/commands>

View File

@ -1,5 +1,5 @@
## Nuxt 3
# Nuxt 3
> The core of Nuxt 3
Learn more about this package: https://v3.nuxtjs.org
Learn more about this package: <https://v3.nuxtjs.org>

View File

@ -1,5 +1,5 @@
## Nuxt Vite Builder
# Nuxt Vite Builder
> [Vite](https://vitejs.dev) bundler for Nuxt 3.
Learn more about this package: https://v3.nuxtjs.org
Learn more about this package: <https://v3.nuxtjs.org>

View File

@ -1,5 +1,5 @@
## Nuxt Webpack Builder
# Nuxt Webpack Builder
> The [Webpack](https://webpack.js.org) bundler for Nuxt 3
Learn more about this package: https://v3.nuxtjs.org
Learn more about this package: <https://v3.nuxtjs.org>

142
yarn.lock
View File

@ -7266,6 +7266,13 @@ __metadata:
languageName: node
linkType: hard
"commander@npm:~8.2.0":
version: 8.2.0
resolution: "commander@npm:8.2.0"
checksum: e868805bc266777f7a9c8a740e15b9e02b8148d8251f577ea9b9ef373ac0bdeb77b9b60cfc033592c9e1affea89993be08c13c623f0c619f9bf152c0e4d12cb0
languageName: node
linkType: hard
"comment-parser@npm:1.2.4":
version: 1.2.4
resolution: "comment-parser@npm:1.2.4"
@ -8316,7 +8323,7 @@ __metadata:
languageName: node
linkType: hard
"deep-extend@npm:^0.6.0":
"deep-extend@npm:^0.6.0, deep-extend@npm:~0.6.0":
version: 0.6.0
resolution: "deep-extend@npm:0.6.0"
checksum: 7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7
@ -8856,6 +8863,13 @@ __metadata:
languageName: node
linkType: hard
"entities@npm:~2.1.0":
version: 2.1.0
resolution: "entities@npm:2.1.0"
checksum: a10a877e489586a3f6a691fe49bf3fc4e58f06c8e80522f08214a5150ba457e7017b447d4913a3fa041bda06ee4c92517baa4d8d75373eaa79369e9639225ffd
languageName: node
linkType: hard
"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
version: 2.2.1
resolution: "env-paths@npm:2.2.1"
@ -10633,6 +10647,13 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"get-stdin@npm:~8.0.0":
version: 8.0.0
resolution: "get-stdin@npm:8.0.0"
checksum: 40128b6cd25781ddbd233344f1a1e4006d4284906191ed0a7d55ec2c1a3e44d650f280b2c9eeab79c03ac3037da80257476c0e4e5af38ddfb902d6ff06282d77
languageName: node
linkType: hard
"get-stream@npm:^4.0.0":
version: 4.1.0
resolution: "get-stream@npm:4.1.0"
@ -10796,7 +10817,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0":
"glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0, glob@npm:~7.2.0":
version: 7.2.0
resolution: "glob@npm:7.2.0"
dependencies:
@ -11451,7 +11472,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"ignore@npm:^5.1.1, ignore@npm:^5.1.4, ignore@npm:^5.1.8":
"ignore@npm:^5.1.1, ignore@npm:^5.1.4, ignore@npm:^5.1.8, ignore@npm:~5.1.8":
version: 5.1.8
resolution: "ignore@npm:5.1.8"
checksum: 967abadb61e2cb0e5c5e8c4e1686ab926f91bc1a4680d994b91947d3c65d04c3ae126dcdf67f08e0feeb8ff8407d453e641aeeddcc47a3a3cca359f283cf6121
@ -11574,6 +11595,13 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"ini@npm:~2.0.0":
version: 2.0.0
resolution: "ini@npm:2.0.0"
checksum: e7aadc5fb2e4aefc666d74ee2160c073995a4061556b1b5b4241ecb19ad609243b9cceafe91bae49c219519394bbd31512516cb22a3b1ca6e66d869e0447e84e
languageName: node
linkType: hard
"init-package-json@npm:^2.0.2":
version: 2.0.5
resolution: "init-package-json@npm:2.0.5"
@ -12405,7 +12433,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"jsonc-parser@npm:^3.0.0":
"jsonc-parser@npm:^3.0.0, jsonc-parser@npm:~3.0.0":
version: 3.0.0
resolution: "jsonc-parser@npm:3.0.0"
checksum: 1df2326f1f9688de30c70ff19c5b2a83ba3b89a1036160da79821d1361090775e9db502dc57a67c11b56e1186fc1ed70b887f25c5febf9a3ec4f91435836c99d
@ -12617,6 +12645,15 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"linkify-it@npm:^3.0.1":
version: 3.0.3
resolution: "linkify-it@npm:3.0.3"
dependencies:
uc.micro: ^1.0.1
checksum: 31367a4bb70c5bbc9703246236b504b0a8e049bcd4e0de4291fa50f0ebdebf235b5eb54db6493cb0b1319357c6eeafc4324c9f4aa34b0b943d9f2e11a1268fbc
languageName: node
linkType: hard
"listhen@npm:^0.2.4, listhen@npm:^0.2.5":
version: 0.2.5
resolution: "listhen@npm:0.2.5"
@ -12772,7 +12809,14 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"lodash.flatten@npm:^4.4.0":
"lodash.differencewith@npm:~4.5.0":
version: 4.5.0
resolution: "lodash.differencewith@npm:4.5.0"
checksum: 79b63aa84e9f7ddfd1451b0ce62888baf94474b91a79ca69da301b2073d3fe30bdfb1bcdbb7365592e1b4e63874ce72a271c0c75e43ab49968c1ca953893d258
languageName: node
linkType: hard
"lodash.flatten@npm:^4.4.0, lodash.flatten@npm:~4.4.0":
version: 4.4.0
resolution: "lodash.flatten@npm:4.4.0"
checksum: 0ac34a393d4b795d4b7421153d27c13ae67e08786c9cbb60ff5b732210d46f833598eee3fb3844bb10070e8488efe390ea53bb567377e0cb47e9e630bf0811cb
@ -13066,6 +13110,61 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"markdown-it@npm:12.2.0":
version: 12.2.0
resolution: "markdown-it@npm:12.2.0"
dependencies:
argparse: ^2.0.1
entities: ~2.1.0
linkify-it: ^3.0.1
mdurl: ^1.0.1
uc.micro: ^1.0.5
bin:
markdown-it: bin/markdown-it.js
checksum: 8e3d6646edf8e7ef19ed707c59d16741bd40804f1e7567407efd2f346ae0f7ddcdeada83e7affebd21b9d7d947b27fc60fd795a970461785030a4e52e750122b
languageName: node
linkType: hard
"markdownlint-cli@npm:^0.29.0":
version: 0.29.0
resolution: "markdownlint-cli@npm:0.29.0"
dependencies:
commander: ~8.2.0
deep-extend: ~0.6.0
get-stdin: ~8.0.0
glob: ~7.2.0
ignore: ~5.1.8
js-yaml: ^4.1.0
jsonc-parser: ~3.0.0
lodash.differencewith: ~4.5.0
lodash.flatten: ~4.4.0
markdownlint: ~0.24.0
markdownlint-rule-helpers: ~0.15.0
minimatch: ~3.0.4
minimist: ~1.2.5
run-con: ~1.2.10
bin:
markdownlint: markdownlint.js
checksum: 4bc748bbfdb7a6d6067453cb1626f7bb2467f5492d71d57e9e5c3e3858edd8e4c41ca4b557eac06e7c72841c484d62a76cda749143e1865721ce8c72d2da4052
languageName: node
linkType: hard
"markdownlint-rule-helpers@npm:~0.15.0":
version: 0.15.0
resolution: "markdownlint-rule-helpers@npm:0.15.0"
checksum: c8cc35fdadf1908e89d08cffa6ab917c56656cd1f4a4bc04f0640a6835658a26d5917251d6d76aea23c242488e51ea86211115f3af102f1925f339e4d3a2b271
languageName: node
linkType: hard
"markdownlint@npm:~0.24.0":
version: 0.24.0
resolution: "markdownlint@npm:0.24.0"
dependencies:
markdown-it: 12.2.0
checksum: 5308070947796d706e752e7dfe6c741fe613d007be152e710a1fb7bbe2f0481beb2be4c0ed053065aea631daeac3f86d66e5e8cb9a753febf35158930771f34f
languageName: node
linkType: hard
"md5.js@npm:^1.3.4":
version: 1.3.5
resolution: "md5.js@npm:1.3.5"
@ -13091,6 +13190,13 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"mdurl@npm:^1.0.1":
version: 1.0.1
resolution: "mdurl@npm:1.0.1"
checksum: 71731ecba943926bfbf9f9b51e28b5945f9411c4eda80894221b47cc105afa43ba2da820732b436f0798fd3edbbffcd1fc1415843c41a87fea08a41cc1e3d02b
languageName: node
linkType: hard
"mem@npm:^8.1.1":
version: 8.1.1
resolution: "mem@npm:8.1.1"
@ -13368,7 +13474,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"minimist@npm:^1.2.0, minimist@npm:^1.2.5":
"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:~1.2.5":
version: 1.2.5
resolution: "minimist@npm:1.2.5"
checksum: 86706ce5b36c16bfc35c5fe3dbb01d5acdc9a22f2b6cc810b6680656a1d2c0e44a0159c9a3ba51fb072bb5c203e49e10b51dcd0eec39c481f4c42086719bae52
@ -14386,6 +14492,7 @@ fsevents@~2.3.2:
globby: ^11.0.4
jiti: ^1.12.9
lerna: ^4.0.0
markdownlint-cli: ^0.29.0
miniflare: ^1.4.1
mocha: ^9.1.3
object-hash: ^2.2.0
@ -17579,6 +17686,20 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"run-con@npm:~1.2.10":
version: 1.2.10
resolution: "run-con@npm:1.2.10"
dependencies:
deep-extend: ^0.6.0
ini: ~2.0.0
minimist: ^1.2.5
strip-json-comments: ~3.1.1
bin:
run-con: cli.js
checksum: 5aea5bf2bc2e61cf407f6751797fe1e4f155ff98479d17ec9fa004fed8edfa95950ac9d022871dbd2faabbd27956a1e774b3ff2beed2289337244bd957ed50ff
languageName: node
linkType: hard
"run-parallel@npm:^1.1.9":
version: 1.2.0
resolution: "run-parallel@npm:1.2.0"
@ -18566,7 +18687,7 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"strip-json-comments@npm:3.1.1, strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
"strip-json-comments@npm:3.1.1, strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1, strip-json-comments@npm:~3.1.1":
version: 3.1.1
resolution: "strip-json-comments@npm:3.1.1"
checksum: 492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
@ -19356,6 +19477,13 @@ fsevents@~2.3.2:
languageName: node
linkType: hard
"uc.micro@npm:^1.0.1, uc.micro@npm:^1.0.5":
version: 1.0.6
resolution: "uc.micro@npm:1.0.6"
checksum: 6898bb556319a38e9cf175e3628689347bd26fec15fc6b29fa38e0045af63075ff3fea4cf1fdba9db46c9f0cbf07f2348cd8844889dd31ebd288c29fe0d27e7a
languageName: node
linkType: hard
"ufo@npm:^0.7.4, ufo@npm:^0.7.9":
version: 0.7.9
resolution: "ufo@npm:0.7.9"