Nuxt•3w ago

Had nuxt project then trying to use nuxt UI

I've build a nuxt project initially wihtout nuxt UI and upon integrating nuxt UI, i'm. getting this error:

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /node_modules/@nuxt/ui/dist/runtime/components/App.vue

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /node_modules/@nuxt/ui/dist/runtime/components/App.vue

Note: posted as pictures due to characters limit.

20 Replies

kapa.ai•3w ago

Hi @Fury. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're encountering an error when integrating Nuxt UI into an existing Nuxt project. Based on the error message, there seems to be an issue with the App.vue component from the Nuxt UI package. This could be related to version compatibility issues between your Nuxt version and the Nuxt UI version. From the knowledge sources, I can see that Nuxt UI has dependencies on specific versions of Nuxt and related packages. Here are some steps to troubleshoot and resolve this issue: 1. Check version compatibility: Make sure you're using compatible versions of Nuxt and Nuxt UI. The error might be occurring because of version mismatches. 2. Install Nuxt UI Pro module: If you're trying to use Nuxt UI Pro components, make sure to add the module to your nuxt.config.ts:

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

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

Getting-started > Typography 3. Clean your dependencies: Try removing node_modules and reinstalling your dependencies:

   rm -rf node_modules
   npm install

   rm -rf node_modules
   npm install

4. Check for conflicting packages: Based on the GitHub issue in the knowledge sources, there might be conflicting versions of dependencies like ohash or @nuxt/kit that could cause build issues. 5. Update all Nuxt-related packages: Make sure all your Nuxt-related packages are updated to compatible versions. If the issue persists, you might need to provide more detailed error information or check the Nuxt UI documentation for specific compatibility requirements. The error message you shared is quite brief, so it's difficult to pinpoint the exact cause of the problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

FuryOP•3w ago

nuxt config:

import { resolve } from "path";

export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
    devtools: { enabled: true },
    app: {
        head: {
            meta: [
                {
                    charset: "utf-8",
                },
                {
                    name: "viewport",
                    content: "width=device-width, initial-scale=1",
                },
            ],
        },
    },
    runtimeConfig: {
        TMDB_API_KEY: process.env.TMDB_API_KEY,
        PASSWORD_ROUNDS: process.env.PASSWORD_ROUNDS,
        APP_KEY: process.env.APP_KEY,
        public: {
            APP_URL: process.env.APP_URL,
        },
    },
    css: ["./assets/css/base.css"],
    extensions: [".ts", ".vue", ".js"],
    modules: ["@pinia/nuxt", "@nuxt/ui"],
    alias: {
        "@schemas": resolve(__dirname, "schemas"),
        "@modules": resolve(__dirname, "modules"),
        "@components": resolve(__dirname, "components"),
        "@services": resolve(__dirname, "server", "services"),
        "@utils": resolve(__dirname, "utils"),
        "@constants": resolve(__dirname, "constants.ts"),
    },
    debug: true,
});

import { resolve } from "path";

export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
    devtools: { enabled: true },
    app: {
        head: {
            meta: [
                {
                    charset: "utf-8",
                },
                {
                    name: "viewport",
                    content: "width=device-width, initial-scale=1",
                },
            ],
        },
    },
    runtimeConfig: {
        TMDB_API_KEY: process.env.TMDB_API_KEY,
        PASSWORD_ROUNDS: process.env.PASSWORD_ROUNDS,
        APP_KEY: process.env.APP_KEY,
        public: {
            APP_URL: process.env.APP_URL,
        },
    },
    css: ["./assets/css/base.css"],
    extensions: [".ts", ".vue", ".js"],
    modules: ["@pinia/nuxt", "@nuxt/ui"],
    alias: {
        "@schemas": resolve(__dirname, "schemas"),
        "@modules": resolve(__dirname, "modules"),
        "@components": resolve(__dirname, "components"),
        "@services": resolve(__dirname, "server", "services"),
        "@utils": resolve(__dirname, "utils"),
        "@constants": resolve(__dirname, "constants.ts"),
    },
    debug: true,
});

Packages:

"dependencies": {
        "@nuxt/ui": "^3.0.2",
        "nuxt": "^3.16.2",
        "@pinia/nuxt": "0.10.1",
        "bcrypt": "^5.1.1",
        "drizzle-orm": "^0.41.0",
        "jsonwebtoken": "^9.0.2",
        "pinia": "^3.0.1",
        "postgres": "^3.4.5",
        "zod": "^3.24.2"
    },
    "devDependencies": {
        "@types/bcrypt": "^5.0.2",
        "@types/jsonwebtoken": "^9.0.9",
        "drizzle-kit": "^0.30.6",
        "tsx": "^4.19.3"
    },

"dependencies": {
        "@nuxt/ui": "^3.0.2",
        "nuxt": "^3.16.2",
        "@pinia/nuxt": "0.10.1",
        "bcrypt": "^5.1.1",
        "drizzle-orm": "^0.41.0",
        "jsonwebtoken": "^9.0.2",
        "pinia": "^3.0.1",
        "postgres": "^3.4.5",
        "zod": "^3.24.2"
    },
    "devDependencies": {
        "@types/bcrypt": "^5.0.2",
        "@types/jsonwebtoken": "^9.0.9",
        "drizzle-kit": "^0.30.6",
        "tsx": "^4.19.3"
    },

app.vue:

<template>
    <UApp>
        <!-- <Suspense>
            <template #fallback>
                <NuxtLoadingIndicator />
            </template> -->
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
        <!-- </Suspense> -->
    </UApp>
</template>

<template>
    <UApp>
        <!-- <Suspense>
            <template #fallback>
                <NuxtLoadingIndicator />
            </template> -->
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
        <!-- </Suspense> -->
    </UApp>
</template>

Node version: 20.18.2 @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Fury, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

HugoRCD•3w ago

@Fury Can you send the rest of the architecture?

FuryOP•3w ago

Modules directory:

FuryOP•3w ago

I followed intructions in this page: https://ui.nuxt.com/getting-started/installation/nuxt

Nuxt UI

Installation - Nuxt UI

Learn how to install and configure Nuxt UI in your Nuxt application.

FuryOP•3w ago

Note: I'm using yarn, not pnpm.

FuryOP•3w ago

base.css

FuryOP•2w ago

Any idea what's going on? @kapa.ai

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the error message you shared earlier and the context of integrating Nuxt UI into an existing Nuxt project, the issue appears to be related to the App.vue component from the Nuxt UI package. Looking at the knowledge sources, I can see that when integrating Nuxt UI, you need to properly wrap your application with the UApp component. This is a critical step mentioned in the installation documentation. Here's what might be causing your issue: 1. Missing App wrapper: The error suggests that there might be an issue with the App component. According to the documentation, you need to wrap your app with the UApp component:

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

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

Getting-started > Installation 2. Incomplete installation: Make sure you've followed all the installation steps, including: - Adding the module to your nuxt.config.ts - Importing the CSS properly - Setting up the proper configuration 3. Dependency issues: If you're using pnpm, ensure that you've set shamefully-hoist=true in your .npmrc file or installed tailwindcss in your project's root directory as mentioned in the documentation. The error you're seeing is quite specific to the App component, which is required for Toast, Tooltip components, and Programmatic Overlays to work properly. Without properly implementing this component, you'll encounter errors when trying to use Nuxt UI. Would you be able to share your current app structure, particularly your main app.vue file and nuxt.config.ts? That would help pinpoint the exact issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Orbis•2w ago

can you try: App.vue

<template>
    <UApp>
        <UButton>Test</UButton>
    </UApp>
</template>

<template>
    <UApp>
        <UButton>Test</UButton>
    </UApp>
</template>

For kapa.ai to understand you, you should not use screenshots. Try to copy paste it, if you have limits do separate messages.

FuryOP•2w ago

@Orbis I have added <UApp> component. In matter of fact, without adding the component, the app works and I don't see the exception. Error I'm getting:

[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/Volumes/Disk 2/work/shows-watchlist/node_modules/@nuxt/ui/dist/runtime/components/App.vue
22 |  import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
23 |  import { reactivePick } from '@vueuse/core'
24 |  import { localeContextInjectionKey } from '../composables/useLocale'
   |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 |  import UToaster from './Toaster.vue'
   |  ^^^^^^^^^^^^^^^^^^^^^^^
26 |  import UOverlayProvider from './OverlayProvider.vue'

[@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/Volumes/Disk 2/work/shows-watchlist/node_modules/@nuxt/ui/dist/runtime/components/App.vue
22 |  import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
23 |  import { reactivePick } from '@vueuse/core'
24 |  import { localeContextInjectionKey } from '../composables/useLocale'
   |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
25 |  import UToaster from './Toaster.vue'
   |  ^^^^^^^^^^^^^^^^^^^^^^^
26 |  import UOverlayProvider from './OverlayProvider.vue'

@kapa.ai

kapa.ai•2w ago

Orbis•2w ago

@Fury can you share any full reproduction of this error?

FuryOP•2w ago

Packages:

"dependencies": {
        "@nuxt/ui": "^3.0.2",
        "nuxt": "^3.16.2",
        "@pinia/nuxt": "0.10.1",
        "bcrypt": "^5.1.1",
        "drizzle-orm": "^0.41.0",
        "jsonwebtoken": "^9.0.2",
        "pinia": "^3.0.1",
        "postgres": "^3.4.5",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0",
        "zod": "^3.24.2"
    },
    "devDependencies": {
        "@types/bcrypt": "^5.0.2",
        "@types/jsonwebtoken": "^9.0.9",
        "drizzle-kit": "^0.30.6",
        "tsx": "^4.19.3"
    },

"dependencies": {
        "@nuxt/ui": "^3.0.2",
        "nuxt": "^3.16.2",
        "@pinia/nuxt": "0.10.1",
        "bcrypt": "^5.1.1",
        "drizzle-orm": "^0.41.0",
        "jsonwebtoken": "^9.0.2",
        "pinia": "^3.0.1",
        "postgres": "^3.4.5",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0",
        "zod": "^3.24.2"
    },
    "devDependencies": {
        "@types/bcrypt": "^5.0.2",
        "@types/jsonwebtoken": "^9.0.9",
        "drizzle-kit": "^0.30.6",
        "tsx": "^4.19.3"
    },

nuxt config:

import { resolve } from "path";

export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
    devtools: { enabled: true },
    app: {
        head: {
            meta: [
                {
                    charset: "utf-8",
                },
                {
                    name: "viewport",
                    content: "width=device-width, initial-scale=1",
                },
            ],
        },
    },
    runtimeConfig: {
        TMDB_API_KEY: process.env.TMDB_API_KEY,
        PASSWORD_ROUNDS: process.env.PASSWORD_ROUNDS,
        APP_KEY: process.env.APP_KEY,
        public: {
            APP_URL: process.env.APP_URL,
        },
    },
    css: ["./assets/css/base.css"],
    extensions: [".ts", ".vue", ".js"],
    modules: ["@pinia/nuxt", "@nuxt/ui"],
    alias: {
        "@schemas": resolve(__dirname, "schemas"),
        "@modules": resolve(__dirname, "modules"),
        "@components": resolve(__dirname, "components"),
        "@services": resolve(__dirname, "server", "services"),
        "@utils": resolve(__dirname, "utils"),
        "@constants": resolve(__dirname, "constants.ts"),
    },
    debug: true,
});

import { resolve } from "path";

export default defineNuxtConfig({
    compatibilityDate: "2024-11-01",
    devtools: { enabled: true },
    app: {
        head: {
            meta: [
                {
                    charset: "utf-8",
                },
                {
                    name: "viewport",
                    content: "width=device-width, initial-scale=1",
                },
            ],
        },
    },
    runtimeConfig: {
        TMDB_API_KEY: process.env.TMDB_API_KEY,
        PASSWORD_ROUNDS: process.env.PASSWORD_ROUNDS,
        APP_KEY: process.env.APP_KEY,
        public: {
            APP_URL: process.env.APP_URL,
        },
    },
    css: ["./assets/css/base.css"],
    extensions: [".ts", ".vue", ".js"],
    modules: ["@pinia/nuxt", "@nuxt/ui"],
    alias: {
        "@schemas": resolve(__dirname, "schemas"),
        "@modules": resolve(__dirname, "modules"),
        "@components": resolve(__dirname, "components"),
        "@services": resolve(__dirname, "server", "services"),
        "@utils": resolve(__dirname, "utils"),
        "@constants": resolve(__dirname, "constants.ts"),
    },
    debug: true,
});

app.vue:

<template>
    <UApp>
        <!-- <Suspense>
            <template #fallback>
                <NuxtLoadingIndicator />
            </template> -->
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
        <!-- </Suspense> -->
    </UApp>
</template>

<template>
    <UApp>
        <!-- <Suspense>
            <template #fallback>
                <NuxtLoadingIndicator />
            </template> -->
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
        <!-- </Suspense> -->
    </UApp>
</template>

Orbis•2w ago

I copied your shared code here but i dont see any error: https://codesandbox.io/p/devbox/nuxt-ui-pro3-fdcykl Please try to repoduce it with this codesandbox. If you have the error within the sandbox we can investigate If you cant reproduce the error in the code sandbox make sure your deps are all up to date

FuryOP•2w ago

I created a new project by running:

npm create nuxt@latest -- -t ui

npm create nuxt@latest -- -t ui

and compared the new project to mine, the problem is being caused due to typescript , it was missing from my package.json. There was no instruction about it being required in the docs at all. @Orbis I appreciate your efforts and help!

Gaming

Programming

Had nuxt project then trying to use nuxt UI

Did you find this page helpful?