N
Nuxtmaoberlehner

Auto-import only Nuxt and Vue features but no custom or third party code

Hey! I wonder: is it possible to disable auto imports for components, composables, and utils while keeping Nuxt and Vue auto-imports enabled? If yes: how? Thx!
JB
JuanP Barba17d ago
Hey @maoberlehner , it looks that there is no a built in way to do what you are asking for. First of all we need to understand the imports config. You have 2 different imports, one for components and other for utilities(composables, utilities and libraries). Components auto import is easy to be disabled, you just need to do:
export default defineNuxtConfig({
components: {
// this disables components auto import
dirs: [],
},
})
export default defineNuxtConfig({
components: {
// this disables components auto import
dirs: [],
},
})
The problem is with the utilities auto import. You can disable utilities auto imports with this:
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
export default defineNuxtConfig({
imports: {
autoImport: false,
},
})
The problem with this config is that: - Auto imports are not totally disabled. You can check that .nuxt/imports.d.ts is showing all the imports types. - Any import you add manually is disabled, from config and modules. You will see that they are at .nuxt/imports.d.ts, but they will not be imported at runtime - You can use the imports with '#imports' path - If you define for example imports.presets: ['vue'], vite will throw an error The only way that you can achive this right now is with something like that:
export default defineNuxtConfig({
devtools: { enabled: false },
components: {
// this disables components auto import
dirs: [],
},
hooks: {
// this disables composables and utils auto import
'imports:dirs': (dirs) => {
['./composables', './utils'].forEach((i) =>
removeAutoImportFromDirs(dirs, i)
);
},
},
});

function removeAutoImportFromDirs(dirs: string[], dir: string) {
const autoImportDir = dirs.indexOf(new URL(dir, import.meta.url).pathname);
if (autoImportDir !== -1) {
dirs.splice(autoImportDir, 1);
}
}
export default defineNuxtConfig({
devtools: { enabled: false },
components: {
// this disables components auto import
dirs: [],
},
hooks: {
// this disables composables and utils auto import
'imports:dirs': (dirs) => {
['./composables', './utils'].forEach((i) =>
removeAutoImportFromDirs(dirs, i)
);
},
},
});

function removeAutoImportFromDirs(dirs: string[], dir: string) {
const autoImportDir = dirs.indexOf(new URL(dir, import.meta.url).pathname);
if (autoImportDir !== -1) {
dirs.splice(autoImportDir, 1);
}
}
You can play with this configs at: https://stackblitz.com/edit/nuxt-starter-xuhfai?file=nuxt.config.ts
Juanp
StackBlitz
nuxt 3 - auto import POC - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
JB
JuanP Barba17d ago
GitHub
feat(nuxt): introduce imports.scan option by antfu · Pull Request...
🔗 Linked issue #26525 📚 Description I think auto imports for local composables are the main source of implicitness we have for auto imports. This PR introduced the imports.scan: false option to dis...