mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: modules section improvements (#4185)
* docs: modules section improvements * lint fix
This commit is contained in:
parent
47b7e5cd94
commit
500e90d867
@ -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.
|
||||
|
@ -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)
|
||||
::
|
||||
|
Loading…
Reference in New Issue
Block a user