Nuxt layer - issues with extending type when using nuxt alias and using remote layer source

[leeovery]

Environment

---

• Operating System: Darwin
• Node Version: v22.13.1
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: bun@1.2.2
• Builder: -
• User Config: compatibilityDate, devtools, extends
• Runtime Modules: -
• Build Modules: -

---

Reproduction

The layer

nuxt.config.ts

import { createResolver } from '@nuxt/kit';

const { resolve } = createResolver(import.meta.url);

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  alias: {
    '@base': resolve('./'),
  },
})

components/Button.vue

<script lang="ts">
import type { ButtonHTMLAttributes } from 'vue';

// NOTE: relative import works...
import type { Theme } from '../ui/createTheme'; // WORKS

// BUT: using alias causes issues with the type inference (somehow).
// import type { Theme } from '@base/ui/createTheme'; // FAILS WHEN USING REMOTE LAYER SOURCE

export interface ButtonProps extends Theme {
  type?: ButtonHTMLAttributes['type'];
  disabled?: boolean;
}
</script>

<script lang="ts" setup>
withDefaults(defineProps<ButtonProps>(), {
  type: 'button',
});
</script>

ui/createTheme.ts

export interface Theme {
  theme?: string;
}

The app

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  extends: [
    // ['../nuxt-layer-test-layer', { install: true }],
    ['github:leeovery/nuxt-layer-test-layer', { install: true }]
  ],
});

pages/test.vue

<template>
  <Button type="submit">hello</Button>
</template>

I have setup two simple repos.

The app: https://github.com/leeovery/nuxt-layer-test-app
The layer: https://github.com/leeovery/nuxt-layer-test-layer

If you extend from the layer in the app using the local version, everything works fine, whether you use the alias or a relative path to import the type.

However, if you import the layer using github (which you can do in the app's nuxt.config.ts), then you will see that using the aliases causes the Vue error regarding failing to resolve base type. If you change the import of the theme type in the Button comp. to be a relative path, then all works as expected.

Describe the bug

The issue appears to be when:

• Using a Nuxt path alias to reference the layer's root dirs,
• then importing a type using that alias,
• then extending from that type to create your prop definition,
• and finally "using" the layer via a remote source.

Then in the app (extending the later) you will get this overlay error:

All these things need to be true (it seems) for this bug to occur.

At this stage Im not 100% sure this is a bug or a known limitation. But either way hopefully this will help others later who run into the same issue.

Are we meant to be using aliases like this? Is it a bug?

Thanks!!
Lee

Additional context

No response

Logs

[marr]

Any luck fixing this issue @leeovery ?

[leeovery]

Any luck fixing this issue @leeovery ?

I'm afraid not 😔

[BotellaA]

Any update? @leeovery did you manage to find an acceptable workaround?

[leeovery]

@BotellaA Im afraid not. It still is an issue with the new #layers imports too. :(

Still waiting for the issue to be triaged and checked out. Not sure who to tag to get that to happen.

You can add /* @vue-ignore */ after the extends keyword but this breaks the code, as the props arent properly recognised. So this isnt a fix at all.

[BotellaA]

@danielroe any update or idea of a real workaround? Thanks for your feedbacks