feat(docs): describe each part of kit

This commit is contained in:
Andrey 2023-08-16 15:34:45 +03:00
parent 82aeeb5774
commit 1deedc271d

View File

@ -291,6 +291,8 @@ Options to pass in [`c12`](https://github.com/unjs/c12#options) `loadConfig` cal
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/compatibility.ts)
Kit utilities can be used in Nuxt 3, Nuxt 2 with Bridge and Nuxt 2 without Bridge. To make sure your module is compatible with all versions, you can use the `checkNuxtCompatibility`, `assertNuxtCompatibility` and `hasNuxtCompatibility` functions. They will check if the current Nuxt version meets the constraints you provide. Also you can use `isNuxt2`, `isNuxt3` and `getNuxtVersion` functions for more granular checks.
### `checkNuxtCompatibility`
Checks if constraints are met for the current Nuxt version. If not, returns an array of messages. Nuxt 2 version also checks for `bridge` support.
@ -508,6 +510,12 @@ Nuxt instance. If not provided, it will be retrieved from the context via `useNu
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/imports.ts)
::alert{type=info}
These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](#pages), [Components](#components), [Plugins](#plugins).
::
Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins. Composables or plugins can use these functions.
### `addImports`
Add imports to the Nuxt application. It makes your imports available in the Nuxt application without the need to import them manually.
@ -819,6 +827,8 @@ export default defineNuxtModule({
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/components.ts)
Nuxt 3, by default, imports components located in the `components` directory. But there might be occasions when you wish to source components from a different directory or prefer to import them only on-demand. To cater to these needs, Nuxt 3 introduces the `addComponentsDir` and `addComponent` functionalities. These tools enable you to tailor the components configuration according to your requirements.
### `addComponentsDir`
Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify `global: true` option.
@ -1097,8 +1107,10 @@ An object with the following properties:
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/context.ts)
Nuxt modules allow you to enhance Nuxt's capabilities. They offer a structured way to keep your code organized and modular. If you're looking to break down your module into smaller components, Nuxt offers the `useNuxt` and `tryUseNuxt` functions. These functions enable you to conveniently access the Nuxt instance from the context without having to pass it as argument.
::alert{type=info}
When you're working with the `setup` function in Nuxt modules, Nuxt is already provided as the second argument. This means you can directly utilize it without needing to call `useNuxt()`. However, if you want to access Nuxt from other functions, then you can use `useNuxt()` or `tryUseNuxt()`. You can look at [Nuxt Site Config](https://github.com/harlan-zw/nuxt-site-config) as an example of usage.
When you're working with the `setup` function in Nuxt modules, Nuxt is already provided as the second argument. This means you can directly utilize it without needing to call `useNuxt()`. You can look at [Nuxt Site Config](https://github.com/harlan-zw/nuxt-site-config) as an example of usage.
::
### `useNuxt`