Fury Comments - Answer Overflow

Fury

Posts Comments

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

I appreciate your efforts and help!

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

@Orbis

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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.

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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>

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

@kapa.ai

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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'

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

Note: I'm using yarn, not pnpm.

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

@kapa.ai

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

Node version: 20.18.2

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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>

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

NNuxt

•Created by Fury on 4/5/2025 in #❓・help

Had nuxt project then trying to use nuxt UI

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

36 replies

Gaming

Programming