docs: add addComponent and testing to modules and update addImports

docs/content/2.guide/4.going-further/3.modules.md

@@ -184,7 +184,7 @@ Commonly, modules provide one or more run plugins to add runtime logic.
 import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
 
 export default defineNuxtModule<ModuleOptions>({
-  setup (options, nuxt) {
+  setup(options, nuxt) {
     // Create resolver to resolve relative paths
     const { resolve } = createResolver(import.meta.url)
 
@@ -204,12 +204,32 @@ If your module will provide a CSS library, make sure to check if the user alread
 import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup (options, nuxt) {
+  setup(options, nuxt) {
     nuxt.options.css.push('font-awesome/css/font-awesome.css')
   }
 })
 ```
 
+### Adding Vue Components
+
+If your module should provide Vue components, you can use `addComponents` utility to add them as auto-imports for nuxt to resolve.
+
+```ts
+import { defineNuxtModule, addComponent } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup(options, nuxt) {
+    addComponent({
+      name: 'MyComponent', // name of the component
+      export: 'MyAwesomeComponent', // (optional) name of the component to be used in vue templates
+      // filePath should be package name or resolved path
+      // if the component is created locally, preferably in `runtime` dir
+      filePath: '@vue/awesome-components' // resolve(runtimeDir, 'components', 'MyComponent.vue')
+    })
+  }
+})
+```
+
 ### Clean Up Module
 
 If your module opens, handles or starts a watcher, you should close it when the Nuxt lifecycle is done. For this, use the `close` hook:
@@ -218,10 +238,18 @@ If your module opens, handles or starts a watcher, you should close it when the
 import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup (options, nuxt) {
+  setup(options, nuxt) {
     nuxt.hook('close', async nuxt => {
       // Your custom code here
     })
   }
 })
 ```
+
+### Testing a Module
+
+Nuxt also has a testing library for testing nuxt apps, which includes modules. You can check out [testing example](/examples/advanced/testing), to see how `@nuxt/test-utils` utilize `playwright` to test nuxt app.
+
+If you wish to test your module outside of the module playground, recommended way is to use [npm-pack](https://docs.npmjs.com/cli/v7/commands/npm-pack), or your package manager equivalent, to create tarball from your module. Then in your test project, you can add module to `package.json` packages as: `"nuxt-module-name": "file:/path/to/tarball.tgz"`
+
+After that, you should be able to reference `nuxt-module-name` like in any regular project.

docs/content/3.api/4.advanced/2.kit.md

@@ -34,8 +34,8 @@
 
 [source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/imports.ts)
 
-- `addAutoImport(imports)`
-- `addAutoImportDir(autoImportDirs)`
+- `addImports(imports)`
+- `addImportsDir(autoImportDirs)`
 
 ### Components