Nuxt•2mo ago

Nuxt auto imports: useToast is not defined

I've tried to replicate this on stackblitz but it's only happening locally when I'm developing. Unless I explicitly import useToast like this:- import { useToast } from "#ui/composables/useToast"; when I run my app, I get:- 500 useToast is not defined This also applies to useOverlay and useLocale. So something is wrong in my setup but I can't figure out what it could be. Here is my nuxt info:- - Operating System: Darwin - Node Version: v20.19.0 - Nuxt Version: 4.1.3 - CLI Version: 3.29.3 - Nitro Version: 2.12.7 - Package Manager: yarn@1.22.22 - Builder: - - User Config: compatibilityDate, devtools, devServer, app, css, modules, apiParty, auth, googleFonts, svgo, runtimeConfig - Runtime Modules: @nuxt/ui@4.0.1, nuxt-svgo@4.2.6, @nuxtjs/google-fonts@3.2.0, @sidebase/nuxt-auth@1.1.0, nuxt-api-party@3.4.1 - Build Modules: - Any ideas?

3 Replies

kapa.ai•2mo ago

Hi @bodger. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, here are the most likely causes and solutions for the issue where useToast (and similar composables like useOverlay and useLocale) are not auto-imported in your local Nuxt 4.1.3 setup: 1. Directory Structure Nuxt 4 auto-imports composables only from the app/composables/ directory, not from a top-level composables/ directory. If your composables/ folder is not inside the app/ directory, auto-import will not work. Make sure your structure is:

app/
  composables/
    useToast.ts
    useOverlay.ts
    useLocale.ts

app/
  composables/
    useToast.ts
    useOverlay.ts
    useLocale.ts

If your composables/ directory is at the root level (next to app/), Nuxt will not scan it by default. This is a common source of this problem. See the Nuxt docs on composables directory structure and a related GitHub issue where this was the root cause. 2. How Files Are Scanned By default, Nuxt only scans the top level of app/composables/. If your composables are nested in subfolders, you need to either re-export them in app/composables/index.ts or configure the imports.dirs option in your nuxt.config.ts to include nested directories:

export default defineNuxtConfig({
  imports: {
    dirs: [
      'app/composables',
      'app/composables/**', // for nested composables
    ],
  },
})

export default defineNuxtConfig({
  imports: {
    dirs: [
      'app/composables',
      'app/composables/**', // for nested composables
    ],
  },
})

How files are scanned 3. Disabling or Misconfiguring Auto-Imports Check your nuxt.config.ts for the imports option. If you have set autoImport: false or scan: false, auto-imports will be disabled or limited:

export default defineNuxtConfig({
  imports: {
    autoImport: false, // disables all auto-imports
    // or
    scan: false, // disables scanning your own composables
  },
})

export default defineNuxtConfig({
  imports: {
    autoImport: false, // disables all auto-imports
    // or
    scan: false, // disables scanning your own composables
  },
})

If either of these is set, you must import composables manually. See docs 4. Third-Party Module Composables If you are using composables from modules like @nuxt/ui, they should be auto-imported if the module is installed and enabled. For example, useToast from @nuxt/ui is auto-imported and should be available globally if the module is working correctly. Make sure the module is listed in your modules array and that there are no errors during install or build. See useToast docs 5. TypeScript and Dev Server Nuxt generates type declarations for auto-imported composables when you run the dev server. If you create a composable without the dev server running, TypeScript may throw errors. Make sure to restart your dev server after adding new composables. --- Summary of steps to check: 1. Ensure your composables are in app/composables/, not at the root. 2. If using subfolders, configure imports.dirs or re-export in index.ts. 3. Check that autoImport and scan are not set to false in your config. 4. Confirm that third-party modules are installed and enabled. 5. Restart your dev server after changes. If you follow these steps and the issue persists, please double-check your directory structure and configuration as described above.
Directory-based auto-imports
Composables directory structure
GitHub issue: composables functionality If you need further help, please provide your project directory structure and relevant parts of your nuxt.config.ts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@732500266712039454> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bodgerOP•2mo ago

Here is the relevant part of my nuxt config:- export default defineNuxtConfig({ compatibilityDate: "2025-07-15", devtools: { enabled: true }, app: { pageTransition: { name: "page", mode: "out-in" }, layoutTransition: { name: "layout", mode: "out-in" }, }, css: ["~/assets/css/main.css"], modules: [ "@nuxt/ui", "nuxt-svgo", "@nuxtjs/google-fonts", "@sidebase/nuxt-auth", "nuxt-api-party", ], }) I've attached a screenshot of my directory structure.

Gaming

Programming

Nuxt auto imports: useToast is not defined

Did you find this page helpful?