Auto-imports
WXT uses the same tool as Nuxt for auto-imports, unimport
.
Testing
To setup your test environment for auto-imports, see Testing.
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:
// 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'],
},
});
To disable auto-imports, set imports: false
export default defineConfig({
imports: false,
});