You can get automatic type-hinting for Nuxt configuration, plugins, middleware, modules and serverMiddleware.

There are some helpers to optimize developer experience when creating Nuxt plugins, middleware, server middleware and modules.

These helpers simply return the function or object passed into them, adding the correct typings.


Create your nuxt.config.js with types with:

import { defineNuxtConfig } from '@nuxtjs/composition-api'

export default defineNuxtConfig({
  // your nuxt config
Note that if you define your Nuxt config this way you will need to ensure that @nuxtjs/composition-api is present in your dependencies rather than devDependencies .


Create a plugin with types with:

import { defineNuxtPlugin } from '@nuxtjs/composition-api'

export default defineNuxtPlugin(ctx => {
  // do stuff


Create middleware with types with:

import { defineNuxtMiddleware } from '@nuxtjs/composition-api'

export default defineNuxtMiddleware(ctx => {
  // do stuff


Create a Nuxt module with types with:

import { defineNuxtModule } from '@nuxtjs/composition-api'

export default defineNuxtModule<{ myOption: boolean }>(moduleOptions => {
  // do stuff


Create server middleware with types with:

import { defineNuxtServerMiddleware } from '@nuxtjs/composition-api'

export default defineNuxtServerMiddleware((req, res, next) => {
  // do stuff
Edit this page on GitHub Updated at Tue, Mar 2, 2021