#Nuxt auto imports: useToast is not defined

6 messages · Page 1 of 1 (latest)

umbral slate
#

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?

cerulean shaleBOT
#

Hi @umbral slate. 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

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
    ],
  },
})

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
  },
})

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

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