docs: modules section improvements (#4185)

* docs: modules section improvements

* lint fix
This commit is contained in:
Sébastien Chopin 2022-04-08 01:11:40 +02:00 committed by GitHub
parent 47b7e5cd94
commit 500e90d867
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 8 deletions

View File

@ -19,13 +19,13 @@ Starter template and module starter is a standard path of creating a Nuxt module
**Next steps:**
- Open `my-module` in IDE of your choice (Visual Studio Code is recommended)
- Install dependencies using the package manager of your choice (Yarn is recommended)
- Ensure local files are generated using `npm run dev:prepare`
- Start playground using `npm run dev`
- **Follow this document to learn more about Nuxt modules**
1. Open `my-module` in the IDE of your choice (Visual Studio Code is recommended)
2. Install dependencies using the package manager of your choice (Yarn is recommended)
3. Ensure local files are generated using `npm run dev:prepare`
4. Start playground using `npm run dev`
5. Follow this document to learn more about Nuxt modules
::alert{type=warning icon=🚧}
::alert{type=info icon=🚧}
This is an under-the-progress guide. Please regularly check for updates.
::
@ -99,6 +99,8 @@ Result of `defineNuxtModule` is a wrapper function with `(inlineOptions, nuxt)`
**`defineNuxtModule` features:**
::list
- Support `defaults` and `meta.configKey` for automatically merging module options
- Type hints and automated type inference
- Add shims for basic Nuxt 2 compatibility
@ -109,6 +111,8 @@ Result of `defineNuxtModule` is a wrapper function with `(inlineOptions, nuxt)`
- Ensuring backward and upward compatibility as long as the module is using `defineNuxtModule` from the latest version of `@nuxt/kit`
- Integration with module builder tooling
::
## Best practices
### Async Modules
@ -181,12 +185,17 @@ import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
export default defineNuxtModule<ModuleOptions>({
setup (options, nuxt) {
const resolver = createResolver(import.meta.url)
addPlugin(resolver.resolve('runtime/plugin'))
// Create resolver to resolve relative paths
const { resolve } = createResolver(import.meta.url)
addPlugin(resolve('./runtime/plugin'))
}
})
```
::ReadMore{link="/api/advanced/kit" title="API > Advanced > Kit"}
::
### Add a CSS Library
If your module will provide a CSS library, make sure to check if the user already included the library to avoid duplicates and add an option to disable the CSS library in the module.

View File

@ -22,6 +22,9 @@ You can install the latest nuxt kit by adding it to `dependencies` of `package.j
import { useNuxt } from '@nuxt/kit'
```
::ReadMore{link="/api/advanced/kit" title="API > Advanced > Kit"}
::
::alert{type="warning"}
Nuxt kit utilities are only available for modules and not meant to be imported in runtime (components, vue composables, pages, plugins, or server routes)
::