Nuxt•3w ago

[Nuxt UI 3] Cannot find module '#build/app.config' or its corresponding type declarations

I'm using Nuxt UI 3 in my vue(not nuxt) project. When I run vite build, the build will failed and gives me errors like Cannot find module '#build/app.config' or its corresponding type declarations. or Cannot find module '#imports' or its corresponding type declarations.. It seems like many ui components have these two imports but they can't be found in the package.json file or anywhere else. Does this have to do with nuxt not being installed or anything?

6 Replies

kapa.ai•3w ago

Hi @Reeed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, this error is related to using Nuxt UI in a Vue-only project (without Nuxt). The imports like #build/app.config and #imports are Nuxt-specific aliases that don't exist in a standard Vue project. When using Nuxt UI with Vue (not Nuxt), you need to follow a specific setup process that includes using the Nuxt UI Vite plugin and Vue plugin to handle these imports properly. Solution You need to make sure you've properly set up Nuxt UI for Vue by: 1. Adding the Nuxt UI Vite plugin in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

2. Using the Nuxt UI Vue plugin in your main.ts:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

3. Wrapping your app with the UApp component:

<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

The Vite plugin is particularly important as it handles the resolution of these special imports that are normally provided by Nuxt. If you're still having issues, you might want to check out the Vue starter template for Nuxt UI which has everything pre-configured correctly. Also, be aware that there are known limitations with app.config.ts that might be affecting your build. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

HugoRCD•3w ago

@Reeed No, nuxt does not need to be installed on a Vue project, but would you have more information to give (package.json, vite.config, etc...)?

han•3w ago

I'm seeing the same issue. I believe it's tracked in this GitHub issue: https://github.com/nuxt/ui/issues/2560 I've shared some info there.

ReeedOP•3w ago

thanks it was the type check that failed to pass

han•3w ago

Yeah, did you manage to resolve it? Or do you just not type check now? 😱

Gaming

Programming

[Nuxt UI 3] Cannot find module '#build/app.config' or its corresponding type declarations

Did you find this page helpful?