Nuxt•3d ago

Setting up auto-imports for @nuxt/ui composables throws "Cannot resolve #imports" error

Environment nuxt: 3.16.2 @nuxt/ui: 3.0.2 Description I am trying to setup auto-imports for the useToast composable following the nuxt doc: This is settings I have in nuxt.config.ts:

{
  imports: {
    scan: false,
    presets: [
      { from: '@nuxt/ui/composables/useToast.js', imports: ['useToast'] },
    ],
  }
}

{
  imports: {
    scan: false,
    presets: [
      { from: '@nuxt/ui/composables/useToast.js', imports: ['useToast'] },
    ],
  }
}

And I got following error:

X [ERROR] Could not resolve "#imports"

    node_modules/@nuxt/ui/dist/runtime/composables/useToast.js:2:25:
      2 │ import { useState } from "#imports";
        ╵                          ~~~~~~~~~~

  The package import "#imports" is not defined in this "imports" map:

    node_modules/@nuxt/ui/package.json:45:13:
      45 │   "imports": {
         ╵              ^

  You can mark the path "#imports" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                        8:37:30 AM  
Error: Build failed with 1 error:
node_modules/@nuxt/ui/dist/runtime/composables/useToast.js:2:25: ERROR: Could not resolve "#imports"

X [ERROR] Could not resolve "#imports"

    node_modules/@nuxt/ui/dist/runtime/composables/useToast.js:2:25:
      2 │ import { useState } from "#imports";
        ╵                          ~~~~~~~~~~

  The package import "#imports" is not defined in this "imports" map:

    node_modules/@nuxt/ui/package.json:45:13:
      45 │   "imports": {
         ╵              ^

  You can mark the path "#imports" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle.


 ERROR  error while updating dependencies:                                                                                                                                        8:37:30 AM  
Error: Build failed with 1 error:
node_modules/@nuxt/ui/dist/runtime/composables/useToast.js:2:25: ERROR: Could not resolve "#imports"

Thanks in advance for any help.

Nuxt

Auto-imports · Nuxt Concepts

Nuxt auto-imports components, composables, helper functions and Vue APIs.

8 Replies

kapa.ai•3d ago

Hi @Lin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can help you with your auto-imports issue for the useToast composable from @nuxt/ui. The error you're encountering is because you're trying to directly import from the compiled JavaScript file in the @nuxt/ui package, which itself is trying to use Nuxt's #imports alias. This creates a dependency resolution problem. Solution The correct way to auto-import the useToast composable is to import it from the package root rather than from the specific file path. Here's how you should modify your configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    scan: false,
    presets: [
      { from: '@nuxt/ui', imports: ['useToast'] }
    ]
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    scan: false,
    presets: [
      { from: '@nuxt/ui', imports: ['useToast'] }
    ]
  }
})

Alternatively, you could simply install the @nuxt/ui module properly, which will automatically set up the necessary imports for you:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

With the module properly installed, you can use useToast() directly in your components without any additional configuration:

<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Hello world',
    description: 'This is a toast message'
  })
}
</script>

<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Hello world',
    description: 'This is a toast message'
  })
}
</script>

Why This Works According to the Nuxt UI documentation for Toast components, the useToast composable is designed to be auto-imported when you install the @nuxt/ui module. The module itself handles setting up all the necessary auto-imports for you. If you still want to keep scan: false for other reasons, make sure you're importing from the package root rather than a specific file path. Nuxt documentation on auto-imports from third-party packages explains that this is the recommended approach for importing from packages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

LinOP•3d ago

@kapa.ai I am getting following error with your solution: [plugin:vite:import-analysis] Importing directly from module entry-points is not allowed.

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're encountering a new error after trying the previous solution. This error is related to Vite's import analysis and how Nuxt handles module imports. The error "Importing directly from module entry-points is not allowed" typically occurs when you're trying to import directly from a package's entry point in certain contexts. Let's try a different approach. Instead of using the imports configuration, you should create a plugin to register the toast service. This is similar to how other UI libraries like PrimeVue handle their toast services in Nuxt. Here's how you can set it up: 1. Create a plugin file in your project:

// plugins/nuxt-ui-toast.ts
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  // This plugin is empty because @nuxt/ui already registers the toast functionality
  // We're just ensuring the toast service is properly initialized
})

// plugins/nuxt-ui-toast.ts
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  // This plugin is empty because @nuxt/ui already registers the toast functionality
  // We're just ensuring the toast service is properly initialized
})

2. Make sure you have the @nuxt/ui module properly configured in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  // You can keep your other configurations
  imports: {
    scan: false,
    // Remove the presets entry for useToast
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  // You can keep your other configurations
  imports: {
    scan: false,
    // Remove the presets entry for useToast
  }
})

This approach is similar to how other UI libraries handle their toast services in Nuxt, as shown in the Stack Overflow post about integrating PrimeVue toast. If you're still experiencing issues, you might want to check if there are any compatibility issues between your Nuxt version and the @nuxt/ui version. The TypeScript integration documentation for Nuxt UI mentions that it's designed to work with Vue 3 Generics and provides enhanced auto-completion for components and props. Let me know if this approach resolves your issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

LinOP•3d ago

@kapa.ai It is not a toast service I think, it is a composable function

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're absolutely right, and I apologize for the confusion. The useToast in Nuxt UI is indeed a composable function, not a service that needs to be registered like PrimeVue's toast service. Looking at the Nuxt UI documentation more carefully, the useToast composable is designed to work with the UApp component which provides the toast functionality: According to the useToast documentation:

Make sure to wrap your app with the App component which uses our Toaster component which uses the ToastProvider component from Reka UI.

Here's the correct approach to use the useToast composable: 1. Make sure you have the @nuxt/ui module properly installed and configured in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

2. Wrap your app with the UApp component in your app.vue:

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

3. Then you can use the useToast composable directly in any component:

<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.'
  })
}
</script>

<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.'
  })
}
</script>

The useToast composable should be auto-imported when you have the @nuxt/ui module properly installed. If you're still having issues with auto-imports, you might need to check your TypeScript configuration or try restarting your Nuxt development server. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Gaming

Programming

Setting up auto-imports for @nuxt/ui composables throws "Cannot resolve #imports" error

Did you find this page helpful?