From 4c17b92b665df434cb02c97cf668c22a4df25464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Levi=20=28Nguy=E1=BB=85n=20L=C6=B0=C6=A1ng=20Huy=29?= Date: Fri, 29 Oct 2021 18:26:01 +0700 Subject: [PATCH] chore(docs): add code format using markdownlint (#1498) (#1556) --- .github/workflows/ci.yml | 3 + .markdownlint.yml | 12 ++ .markdownlintignore | 4 + .../1.getting-started/1.introduction.md | 22 +-- .../1.getting-started/2.installation.md | 12 +- docs/content/1.getting-started/3.bridge.md | 62 ++++---- docs/content/1.getting-started/4.commands.md | 18 ++- docs/content/1.getting-started/5.migration.md | 12 +- docs/content/2.concepts/1.introduction.md | 2 + docs/content/2.concepts/2.server-engine.md | 14 +- docs/content/2.concepts/3.typescript.md | 3 +- .../content/3.docs/1.usage/1.data-fetching.md | 31 ++-- docs/content/3.docs/1.usage/2.state.md | 1 - docs/content/3.docs/1.usage/3.meta-tags.md | 3 +- docs/content/3.docs/1.usage/4.nuxt-app.md | 1 - .../3.docs/2.directory-structure/12.server.md | 2 +- .../3.docs/2.directory-structure/3.assets.md | 1 + .../2.directory-structure/4.components.md | 1 - .../2.directory-structure/5.composables.md | 2 - .../3.docs/2.directory-structure/6.layouts.md | 8 +- .../3.docs/2.directory-structure/9.pages.md | 4 +- docs/content/3.docs/3.deployment/1.azure.md | 10 +- .../3.docs/3.deployment/2.cloudflare.md | 3 +- .../content/3.docs/3.deployment/3.firebase.md | 11 +- docs/content/3.docs/3.deployment/4.netlify.md | 3 +- docs/content/3.docs/3.deployment/5.pm2.md | 3 +- docs/content/3.docs/3.deployment/6.vercel.md | 5 +- .../content/3.docs/3.deployment/99.presets.md | 1 + .../3.docs/3.deployment/99.presets/custom.md | 1 + .../3.docs/3.deployment/99.presets/node.md | 14 +- .../3.docs/3.deployment/99.presets/server.md | 11 +- .../3.deployment/99.presets/service-worker.md | 7 +- docs/content/4.community/2.reporting-bugs.md | 6 +- docs/content/4.community/3.contribution.md | 4 +- docs/yarn.lock | 17 ++- package.json | 2 + packages/bridge/README.md | 4 +- packages/kit/README.md | 4 +- packages/nitro/README.md | 4 +- packages/nuxi/README.md | 4 +- packages/nuxt3/README.md | 4 +- packages/vite/README.md | 4 +- packages/webpack/README.md | 4 +- yarn.lock | 142 +++++++++++++++++- 44 files changed, 345 insertions(+), 141 deletions(-) create mode 100644 .markdownlint.yml create mode 100644 .markdownlintignore diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9a73c6d582..bc0f8a0e60 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -30,6 +30,9 @@ jobs: - name: Lint run: yarn lint + - name: Lint (docs) + run: yarn lint:docs + test: runs-on: ${{ matrix.os }} diff --git a/.markdownlint.yml b/.markdownlint.yml new file mode 100644 index 0000000000..5a098dc409 --- /dev/null +++ b/.markdownlint.yml @@ -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 diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 0000000000..6f8770c3a1 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,4 @@ +**/node_modules + +docs/content/index.md +docs/content/**/15.nuxt.config.md diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.getting-started/1.introduction.md index 0e5e3ada72..990c7b5da5 100644 --- a/docs/content/1.getting-started/1.introduction.md +++ b/docs/content/1.getting-started/1.introduction.md @@ -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 -------------------------|-----------------|------------------|--------- diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index d8834d195d..33e6850eec 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -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 :: ## Next steps diff --git a/docs/content/1.getting-started/3.bridge.md b/docs/content/1.getting-started/3.bridge.md index 99704e3321..d42e492848 100644 --- a/docs/content/1.getting-started/3.bridge.md +++ b/docs/content/1.getting-started/3.bridge.md @@ -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`: -Remove any package lockfiles (`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. diff --git a/docs/content/1.getting-started/4.commands.md b/docs/content/1.getting-started/4.commands.md index 7a421a38c6..b29a190dae 100644 --- a/docs/content/1.getting-started/4.commands.md +++ b/docs/content/1.getting-started/4.commands.md @@ -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 ` or `yarn `. ## 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 : ::code-group -```bash[Yarn] + +```bash [Yarn] yarn dev ``` -```bash[NPM] + +```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] + +```bash [Yarn] yarn build ``` -```bash[NPM] + +```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. diff --git a/docs/content/1.getting-started/5.migration.md b/docs/content/1.getting-started/5.migration.md index b7b1096216..bef8ebc50b 100644 --- a/docs/content/1.getting-started/5.migration.md +++ b/docs/content/1.getting-started/5.migration.md @@ -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 `` 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 diff --git a/docs/content/2.concepts/1.introduction.md b/docs/content/2.concepts/1.introduction.md index 219b77a7a9..ac7d840bc2 100644 --- a/docs/content/2.concepts/1.introduction.md +++ b/docs/content/2.concepts/1.introduction.md @@ -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) diff --git a/docs/content/2.concepts/2.server-engine.md b/docs/content/2.concepts/2.server-engine.md index b1542f2fc4..8b40c3392f 100644 --- a/docs/content/2.concepts/2.server-engine.md +++ b/docs/content/2.concepts/2.server-engine.md @@ -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) diff --git a/docs/content/2.concepts/3.typescript.md b/docs/content/2.concepts/3.typescript.md index d497648649..57b207e5eb 100644 --- a/docs/content/2.concepts/3.typescript.md +++ b/docs/content/2.concepts/3.typescript.md @@ -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. :: diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md index 325096ba04..f9bf807c02 100644 --- a/docs/content/3.docs/1.usage/1.data-fetching.md +++ b/docs/content/3.docs/1.usage/1.data-fetching.md @@ -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 `` 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 diff --git a/docs/content/3.docs/1.usage/2.state.md b/docs/content/3.docs/1.usage/2.state.md index 7a72d22144..1cc20001ee 100644 --- a/docs/content/3.docs/1.usage/2.state.md +++ b/docs/content/3.docs/1.usage/2.state.md @@ -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 diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/3.docs/1.usage/3.meta-tags.md index ac73b8ddf2..9711f042f5 100644 --- a/docs/content/3.docs/1.usage/3.meta-tags.md +++ b/docs/content/3.docs/1.usage/3.meta-tags.md @@ -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({ diff --git a/docs/content/3.docs/1.usage/4.nuxt-app.md b/docs/content/3.docs/1.usage/4.nuxt-app.md index 623741f783..5f85af9345 100644 --- a/docs/content/3.docs/1.usage/4.nuxt-app.md +++ b/docs/content/3.docs/1.usage/4.nuxt-app.md @@ -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. diff --git a/docs/content/3.docs/2.directory-structure/12.server.md b/docs/content/3.docs/2.directory-structure/12.server.md index b27001ee93..2cce2d3a3c 100644 --- a/docs/content/3.docs/2.directory-structure/12.server.md +++ b/docs/content/3.docs/2.directory-structure/12.server.md @@ -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 #### Async function diff --git a/docs/content/3.docs/2.directory-structure/3.assets.md b/docs/content/3.docs/2.directory-structure/3.assets.md index 2532f3224f..8450475472 100644 --- a/docs/content/3.docs/2.directory-structure/3.assets.md +++ b/docs/content/3.docs/2.directory-structure/3.assets.md @@ -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. diff --git a/docs/content/3.docs/2.directory-structure/4.components.md b/docs/content/3.docs/2.directory-structure/4.components.md index 0699e7918a..bc49704170 100644 --- a/docs/content/3.docs/2.directory-structure/4.components.md +++ b/docs/content/3.docs/2.directory-structure/4.components.md @@ -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/`. - diff --git a/docs/content/3.docs/2.directory-structure/5.composables.md b/docs/content/3.docs/2.directory-structure/5.composables.md index 570a6d0945..9046b55544 100644 --- a/docs/content/3.docs/2.directory-structure/5.composables.md +++ b/docs/content/3.docs/2.directory-structure/5.composables.md @@ -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() ``` - diff --git a/docs/content/3.docs/2.directory-structure/6.layouts.md b/docs/content/3.docs/2.directory-structure/6.layouts.md index 90327605f5..18856ac292 100644 --- a/docs/content/3.docs/2.directory-structure/6.layouts.md +++ b/docs/content/3.docs/2.directory-structure/6.layouts.md @@ -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 { ``` -### Example: using with slots +## Example: using with slots You can also take full control (for example, with slots) by using the `` component (which is globally available throughout your application) and set `layout: false` in your component options. @@ -60,14 +60,14 @@ export default { ``` -### Example: using with `