@nuxt/kit

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.

README

👋 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.

	Reporting bugs Check out the Reporting Bugs page.
	Suggestions Check out the Contribution page.
	Questions Check out the Getting Help page.

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