diff --git a/docs/content/2.guide/6.going-further/3.modules.md b/docs/content/2.guide/6.going-further/3.modules.md index 1e469cb5be..9e4bb203bc 100644 --- a/docs/content/2.guide/6.going-further/3.modules.md +++ b/docs/content/2.guide/6.going-further/3.modules.md @@ -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({ 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. diff --git a/docs/content/2.guide/6.going-further/4.kit.md b/docs/content/2.guide/6.going-further/4.kit.md index 7b7112f637..9601318e9b 100644 --- a/docs/content/2.guide/6.going-further/4.kit.md +++ b/docs/content/2.guide/6.going-further/4.kit.md @@ -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) :: diff --git a/docs/content/2.guide/6.going-further/4.esm.md b/docs/content/2.guide/6.going-further/5.esm.md similarity index 100% rename from docs/content/2.guide/6.going-further/4.esm.md rename to docs/content/2.guide/6.going-further/5.esm.md diff --git a/docs/content/2.guide/6.going-further/5.testing.md b/docs/content/2.guide/6.going-further/7.testing.md similarity index 100% rename from docs/content/2.guide/6.going-further/5.testing.md rename to docs/content/2.guide/6.going-further/7.testing.md