allow disabling auto imports

[darthf1]

Describe the feature

First mentioned here by @nikolay-zoteev and @cawa-93 in https://github.com/nuxt/framework/discussions/2271.

I would like to be able to disable auto import, so I can make explicit imports from respective vendor library required in the codebase.

import { ref } from '#imports'

Would become:

import { ref } from 'vue'

Additional, from https://github.com/nuxt/framework/discussions/2271#discussioncomment-2906232:

I still need a reliable and documented way to turn off auto-import.

• Auto-import does not work for the server part
• Auto-import doesn't work for everyone. You still have business logic modules, helpers, utilities, services that you have to import on your own (actually IDE will do everything for you).
• Only top level files can be auto-imported.
• Auto-import of asynchronous components (such as those created by defineAsyncComponent) is not possible.

In addition

• Auto-import complicates IDE code analysis (jet brains have issues with deep import analysis)
• It takes twice as long to go from calling a component to declaring it

Additional information

• [ ] Would you be willing to help implement this feature?
• [ ] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[cawa-93]

Only top level files can be auto-imported. Auto-import of asynchronous components (such as those created by defineAsyncComponent) is not possible.

It was solved for me

[danielroe]

This is a reasonable request, but just to address some of your comments:

Only top level files can be auto-imported.

You can configure this with autoImports.dirs

Auto-import does not work for the server part

Auto imports can be configured for nitro within nitro.autoImport

Auto-import of asynchronous components

You can use resolveComponent('SomeAsyncComponent') if they are registered or marked as global components.

[antfu]

In addition to @danielroe's note:

Only top level files can be auto-imported.

Supported since https://github.com/nuxt/framework/pull/6025

[darthf1]

I got far with some local changes, but in the end got a build error related to the defineNuxtPlugin import:

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  hooks: {
    'autoImports:sources': (sources) => sources.splice(0, sources.length),
    'autoImports:dirs': (dirs) => dirs.splice(0, dirs.length),
    'components:dirs': (dirs) => dirs.splice(0, dirs.length),
  },
}

a-plugin.ts

import { defineNuxtPlugin } from 'nuxt'

export default defineNuxtPlugin(() => {
    ... do something
})

Error:

#0 1.344 > nuxt build
#0 1.344 
#0 1.387 Nuxt CLI v3.0.0-rc.8
#0 6.251 
#0 6.251  ERROR  [nuxt:auto-imports-transform] [unimport] failed to find "defineNuxtPlugin" imported from "#imports"
#0 6.251 file: /home/node/app/node_modules/@pinia/nuxt/dist/runtime/plugin.vue3.mjs
#0 6.251 
#0 6.251 
#0 6.251  ERROR  [unimport] failed to find "defineNuxtPlugin" imported from "#imports"
#0 6.251 
#0 6.251   at node_modules/unimport/dist/chunks/context.mjs:716:17
#0 6.251   at Array.forEach (<anonymous>)
#0 6.251   at node_modules/unimport/dist/chunks/context.mjs:713:44
#0 6.251   at Array.forEach (<anonymous>)
#0 6.251   at detectImports (node_modules/unimport/dist/chunks/context.mjs:711:20)
#0 6.251   at injectImports (node_modules/unimport/dist/chunks/context.mjs:738:50)
#0 6.251   at async Object.transform (node_modules/nuxt/dist/index.mjs:885:21)

I also noticed that /.nuxt/imports.d.ts was not empty:

export { usePinia } from '../node_modules/@pinia/nuxt/dist/runtime/composables';
export { definePageMeta } from '../node_modules/nuxt/dist/pages/runtime/composables';
export { useLink } from 'vue-router';

[darthf1]

What would be the correct import path for defineNuxtPlugin without auto import?

Using Github search, I found a few files which have an import statement:

import { defineNuxtPlugin } from '#app'

In Pinia, the following import statement is used:

import { defineNuxtPlugin } from '#imports'

It could be that in the end it boils down to the same, I dont know :)

But I could not find a .ts or .d.ts file or something similar where this function is exported, which can then be used instead of #app or #imports.

[danielroe]

Yes, we advise using #imports. This ensures it's always resolved properly. You can see the original sources of these files in .nuxt/types/auto-imports.d.ts.