What is @nuxt/kit?
@nuxt/kit is a toolkit for developing Nuxt modules and extending the Nuxt framework. It provides utilities and helpers to streamline the process of creating and managing Nuxt modules, making it easier to integrate custom functionality into Nuxt applications.
What are @nuxt/kit's main functionalities?
Define Nuxt Module
This feature allows you to define a Nuxt module with metadata, default options, and a setup function. The setup function is where you can add your custom logic to extend Nuxt's functionality.
export default defineNuxtModule({
meta: {
name: 'my-module',
configKey: 'myModule'
},
defaults: {
option: true
},
setup (options, nuxt) {
// Module setup code here
}
})
Add Plugin
This feature allows you to add a plugin to your Nuxt application. The `addPlugin` function is used to specify the path to the plugin file, which will be included in the Nuxt build process.
import { addPlugin } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
addPlugin({ src: resolve(__dirname, 'plugin.js') })
}
})
Extend Webpack Config
This feature allows you to extend the Webpack configuration used by Nuxt. The `extendWebpackConfig` function provides access to the existing Webpack config, which you can modify to include custom rules, plugins, or other settings.
import { extendWebpackConfig } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
extendWebpackConfig(config => {
config.module.rules.push({
test: /\.custom$/,
loader: 'custom-loader'
})
})
}
})
Other packages similar to @nuxt/kit
nuxt
Nuxt is the main framework for creating Vue.js applications with server-side rendering, static site generation, and more. While @nuxt/kit is focused on module development, Nuxt itself provides the core functionality for building and running Nuxt applications.
webpack
Webpack is a module bundler for JavaScript applications. While @nuxt/kit provides utilities for extending Nuxt's Webpack configuration, Webpack itself is the underlying tool that handles the bundling and optimization of application assets.
![Nuxt banner](https://github.com/nuxt/nuxt/raw/HEAD/./.github/assets/banner.png)
👋 Welcome to Nuxt
Nuxt's goal is to make web development intuitive and performant, with a great developer experience.
Learn more in the 'What is Nuxt?' section of our documentation.
|
---|
|
Documentation
We highly recommend you take a look at the Nuxt documentation to level up.
|
|
Modules
Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.
|
|
Examples
Explore different ways of using Nuxt features and get inspired with our list of examples.
|
Local Development
Follow the docs to Set Up Your Local Development Environment to contribute to the framework and documentation.
Nuxt 2
You can find the code for Nuxt 2 on the 2.x
branch and the documentation at v2.nuxt.com.
Follow us
License
MIT