Sun Posts - Answer Overflow

Sun

•Created by Sun on 4/24/2025 in #❓・help

Can't build since migrate to Nuxt UI 3

I got this error when I try to build:

 ERROR  Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.                                                                                                            nuxi 9:54:55 AM
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.

/home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
70 |  const slots = defineSlots<ButtonSlots>()
71 |  
72 |  const linkProps = useForwardProps(pickLinkProps(props))
   |                                              ^^^^^^^^^^^
73 |  
   |  ^
74 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
   |  ^^^^^^^^^^^^^^^^^^^^
file: /home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue

 ERROR  Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.                                                                                                            nuxi 9:54:55 AM
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.

/home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
70 |  const slots = defineSlots<ButtonSlots>()
71 |  
72 |  const linkProps = useForwardProps(pickLinkProps(props))
   |                                              ^^^^^^^^^^^
73 |  
   |  ^
74 |  const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
   |  ^^^^^^^^^^^^^^^^^^^^
file: /home/user/projects/pro/app/node_modules/@nuxt/ui/dist/runtime/components/Button.vue

If I remove the <UAlert title="Heads up!" /> from the code below, the app builds correctly:

<template>
  <div>
    <UAlert title="Heads up!" />
  </div>
</template>

<template>
  <div>
    <UAlert title="Heads up!" />
  </div>
</template>

This is my package.json:

{
  "name": "@app/nuxt-layer",
  "type": "module",
  "version": "0.0.1",
  "main": "./nuxt.config.ts",
  "scripts": {
    "build": "nuxt build",
    "clean": "rm -rf node_modules .nuxt .turbo  coverage .output dist .playground",
    "generate": "nuxt generate",
    "lint": "eslint .",
    "lint:fix": "bun run lint --fix",
    "prepare": "nuxt prepare",
    "preview": "nuxt preview",
    "todo:dev": "nuxi dev",
    "todo:typecheck": "nuxi typeckeck"
  },
  "devDependencies": {
    "@iconify-json/lucide": "^1.2.38",
    "@nuxt/eslint": "^1.3.0",
    "@nuxt/ui": "^3.0.2",
    "@sidebase/nuxt-auth": "0.9.4",
    "@vueuse/core": "^13.1.0",
    "@vueuse/nuxt": "^13.1.0",
    "nuxt": "^3.16.2",
  }
}

{
  "name": "@app/nuxt-layer",
  "type": "module",
  "version": "0.0.1",
  "main": "./nuxt.config.ts",
  "scripts": {
    "build": "nuxt build",
    "clean": "rm -rf node_modules .nuxt .turbo  coverage .output dist .playground",
    "generate": "nuxt generate",
    "lint": "eslint .",
    "lint:fix": "bun run lint --fix",
    "prepare": "nuxt prepare",
    "preview": "nuxt preview",
    "todo:dev": "nuxi dev",
    "todo:typecheck": "nuxi typeckeck"
  },
  "devDependencies": {
    "@iconify-json/lucide": "^1.2.38",
    "@nuxt/eslint": "^1.3.0",
    "@nuxt/ui": "^3.0.2",
    "@sidebase/nuxt-auth": "0.9.4",
    "@vueuse/core": "^13.1.0",
    "@vueuse/nuxt": "^13.1.0",
    "nuxt": "^3.16.2",
  }
}

5 replies

NNuxt

•Created by Sun on 11/30/2024 in #❓・help

How to avoid duplicated requests between the server side of two island components?

Hey, I have 3 island components (I use the concept with .server.vue and .client.vue files by island component). I want to fetch the same data from the 3 components, from server side. I don't find the way to share the cache of a useAsyncData between all components, in server side. Is useAsyncData the good way? Is there another way to share data and avoid multiple fetchs? Thanks 🥲

5 replies

NNuxt

•Created by Sun on 11/28/2024 in #❓・help

Island component: share server data to client side

Et there, I need to implement a component with a server side data fetching. To ensure it, I found the concept of island components. But, I don't find a way to share those data with a client's children (or a client part of the component?). In the doc, I read this https://nuxt.com/docs/guide/directory-structure/components#paired-with-a-client-component but the usage of shared elements between .server and .client seems to be not documented yet... Is it possible? How can I do it? Many thanks in advance

6 replies

NNuxt

•Created by Sun on 4/30/2024 in #❓・help

Teleport doesn't work with Nuxt Bridge

Hey, The following features seams to not works in a Nuxt Bridge project: https://nuxt.com/docs/api/components/teleports It's not specified in the documentation, so it's a bug ?

2 replies

NNuxt

•Created by Sun on 3/15/2023 in #❓・help

How make the compartmentalization between Nuxt Bridge app and Nuxt 3 app in same pnpm monorepo ?

I say that because my Nuxt Bridge app try to load some Nuxt 3 dependancies: ... .pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js

1 replies

NNuxt

•Created by Sun on 2/9/2023 in #❓・help

Nuxt bridge generate: all routes are 404

1 replies

NNuxt

•Created by Sun on 1/20/2023 in #❓・help

Create UI components for both Nuxt 2 and Nuxt 3

Hey I have a monorepo with Nuxt 3 and Nuxt 2 apps, i want to share some UI components. Is there a way to create a components library for Nuxt 2 AND Nuxt 3 application ? With Nuxt Bridge ? Or in simple Vue project ? Thanks a lot by advance 🙏 I will create and share à simple exemple of the solution in Github to help the next Guy who stucked by this problem.

3 replies

NNuxt

•Created by Sun on 1/19/2023 in #❓・help

Impossible to have Nuxt 2 app and Nuxt 3 app in same monorepo

Hey, I'm working on a monorepo (with turborepo) of a big project using Nuxt 2 as web interface. I need to create a second web app which using Nuxt 3 but i can't start this app in the monorepo, i got this error when i try to install the project (pnpm i at root):

Scope: all 7 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
apps/nuxt3-app postinstall$ nuxt prepare
│ Nuxi 3.0.0
│ ℹ Client built in 7475ms
│ ℹ Building server...
│  ERROR  [commonjs--resolver] Missing "./server-renderer" export in "vue" package
│  ERROR  Missing "./server-renderer" export in "vue" package

Scope: all 7 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
apps/nuxt3-app postinstall$ nuxt prepare
│ Nuxi 3.0.0
│ ℹ Client built in 7475ms
│ ℹ Building server...
│  ERROR  [commonjs--resolver] Missing "./server-renderer" export in "vue" package
│  ERROR  Missing "./server-renderer" export in "vue" package

I think the problem is because the root node_modules is shared. I just pushed a simple version of my project here which reproduce the problem: https://github.com/Suniron/monorepo-nuxt2-nuxt3-problem

2 replies

Gaming

Programming