Support for explicit import global components

[xiaoxiangmoe]

Can we use

<script setup lang="ts">
import { NuxtLink } from 'some-nuxt-lib-location'
</script>
<template>
  <div>
    <nuxt-link :to="`/test/123`">
      Random path
    </nuxt-link>
  </div>
</template>

Additional context

We use https://eslint.vuejs.org/rules/no-undef-components.html and all component should be registered locally.

[danielroe]

Would you provide a reproduction? I'm not sure what you mean.

[xiaoxiangmoe]

Not a bug. It's a feature request or question.

In vue-router, we can use import { RouterLink, RouterView } from 'vue-router'

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header> 
    <div class="wrapper"> 
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav> 
  </header>
  <RouterView />
</template>

see

https://github.com/vuejs/create-vue-templates/blob/284fcf591115e5cf39e4461e2fd4cd2c5ea009bb/typescript-router/src/App.vue#L1-L2

Which lib should I import when I use <NuxtLink>?

Can I write import { NuxtLink } from 'nuxt3' or something else?

<script setup lang="ts">
import { NuxtLink } from 'nuxt3'
</script>

<template>
  <header> 
    <div class="wrapper"> 
      <nav>
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/about">About</NuxtLink>
      </nav> 
  </header> 
</template>

[lperez22]

You shouldn't have to import NuxtLink it will be auto imported by using the component. I have an example here https://stackblitz.com/edit/nuxt-starter-g2m6nk

[Atinux]

You can learn more about the auto-import in https://v3.nuxtjs.org/concepts/auto-imports

[danielroe]

What do you think @pi0 - would it be useful to expose a #components import for directly importing from scanned components?

[xiaoxiangmoe]

We use https://eslint.vuejs.org/rules/no-undef-components.html and all component should be registered locally. So I can't use auto import in our project.

[pi0]

Seems a good idea @danielroe. We had same possibility with Nuxt2 (https://github.com/nuxt/components/blob/main/templates/components/index.js)

Would be nice if we could also expose possible component names as an array as well.

[baryla]

I think this will definitely be useful, especially for peeps using JSX components. At the moment, doing something like this actually works:

// App.tsx
import { defineComponent } from 'vue';

export default defineComponent(() => {
  return () => (
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  )
});

but because there are no imports, TS actually complains with Cannot find name 'NuxtLayout'. ts(2304) etc. This I guess could be fixed with something like a .d.ts file and registering a global type for them but it seems like a hacky workaround to be honest.

[danielroe]

@baryla FYI, there are global types registered in .nuxt/types/components.d.ts for auto-scanned components and also, for built-in Nuxt components: https://github.com/nuxt/framework/blob/dbab979a2ed28b8f3d02044079f6b9039114d5ff/packages/nuxt3/src/pages/runtime/router.ts#L18-L28.

[baryla]

@danielroe thanks for the reply. I just checked my .nuxt/types/components.d.ts and all I have in there is:

// Generated by components discovery
declare module 'vue' {
  export interface GlobalComponents {
    'NuxtWelcome': typeof import("../../node_modules/nuxt3/dist/app/components/nuxt-welcome.vue")['default'],
    'ClientOnly': typeof import("../../node_modules/nuxt3/dist/app/components/client-only")['default']
  }
}
export {}

I'm not sure if I should turn anything on in the settings? My nuxt.config.ts file has no settings turned on.

When I created a component in /components, it did generate a global type for it however, TS still complained that no imports have been defined when I use it so I'm not sure if I'm doing something wrong or...?

btw. 👆 this is from a completely fresh installation of Nuxt.

[misaon]

+1

[zsilbi]

My dev server hangs on specific routes on page reload when I import and use components imported from #components. It seems like a Vite issue, but if I import the same component from it's direct location the issue is gone. It also applies to built-in components like NuxtLink.

I was able to create a small reproduction of the issue, you can find it here: https://stackblitz.com/edit/nuxt-starter-azudzq?file=pages%2Findex.vue

[slacktracer]

Did you find a way to do it, @xiaoxiangmoe? Right now having to import things from #imports or #app is the worst thing about Nuxt for me. In particular it messes with auto sorting of imports.