Auto-imports
WXT uses the same tool as Nuxt for auto-imports, unimport
.
WXT Auto-imports
Some WXT APIs can be used without importing them:
browser
fromwxt/browser
, a small wrapper aroundwebextension-polyfill
defineContentScript
fromwxt/sandbox
defineBackground
fromwxt/sandbox
defineUnlistedScript
fromwxt/sandbox
createIntegratedUi
fromwxt/client
createShadowRootUi
fromwxt/client
createIframeUi
fromwxt/client
fakeBrowser
fromwxt/testing
And more!
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/*
To add auto-imports from subdirectories, like utils/api/some-file.ts
, re-export them from the base directory:
// utils/index.ts
export * from './api/some-file.ts';
Alternatively, you could add the directory to the list of auto-import directories in your config file.
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 so your editor has everything it needs to report type errors after installing dependencies:
// package.json
{
"scripts": {
"postinstall": "wxt prepare"
}
}
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 functions like createApp, ref, computed, watch, toRaw, etc...
presets: ['vue'],
},
});
Disabling Auto-imports
To disable auto-imports, set imports: false
export default defineConfig({
imports: false,
});
ESLint
ESLint doesn't know about the auto-imported variables unless they are explicitly defined in the globals
config. By default, WXT will generate the config if it detects ESLint is installed in your project. If the config isn't generated automatically, you can manually tell WXT to generate it.
// wxt.config.ts
export default defineConfig({
imports: {
eslintrc: {
enabled: 8, // Generate ESLint v8 compatible config
// or
enabled: 9, // Generate ESLint v9 compatible config
},
},
});
ESLint 9 and above
WXT supports the "flat config" file format introduced in ESLint 9. Just import the generated file and add it to the array of config to extend.
// eslint.config.mjs
import autoImports from './.wxt/eslint-auto-imports.mjs';
export default [autoImports];
ESLint 8 and below
Just extend the generated file:
// .eslintrc.mjs
export default {
extends: ['./.wxt/eslintrc-auto-import.json'],
};