Nuxt•3mo ago

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!

2 Replies

JuanP Barba•3mo 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.

JuanP Barba•3mo ago

@maoberlehner FYI: https://github.com/nuxt/nuxt/pull/26576

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...

Gaming

Programming

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