wxt/docs/guide/auto-imports.md

Auto-imports

WXT uses the same tool as Nuxt for auto-imports, unimport.

:::info Testing To setup your test environment for auto-imports, see Testing. :::

WXT Auto-imports

Some WXT APIs can be used without importing them:

• browser from wxt/browser, a small wrapper around webextension-polyfill
• defineContentScript from wxt/client
• defineBackground from wxt/client

And more. All wxt/client APIs can be used without imports.

Project Auto-imports

In addition WXT APIs, default and named exports from inside the following directories can be used without listing them in imports.

• <srcDir>/components/**/*
• <srcDir>/composables/**/*
• <srcDir>/hooks/**/*
• <srcDir>/utils/**/*

TypeScript

For TypeScript to work, you need to run the wxt prepare command. This will ensure types are generated for auto-imports.

This should be added to your postinstall script:

// package.json
{
  "scripts": {
    "postinstall": "wxt prepare" // [!code ++]
  }
}

Customization

You can override the default auto-import behavior in your wxt.config.ts file.

See unimport's documentation for a complete list of options.

import { defineConfig } from 'wxt';

export default defineConfig({
  imports: {
    // Add auto-imports for vue fuctions like createApp, ref, computed, watch, toRaw, etc...
    preset: ['vue'],
  },
});

To disable auto-imports, set imports: false

export default defineConfig({
  imports: false,
});