markthree
commented
1 year ago This is built-in in nuxt3, and no additional package is required 👉 nuxt.com/docs/guide/directory-structure/components
Open dmaass-thing opened 1 year ago
markthree
commented
1 year ago This is built-in in nuxt3, and no additional package is required 👉 nuxt.com/docs/guide/directory-structure/components
dmaass-diva-e
commented
1 year ago Thanks for your answer @markthree Sorry but I'm not able to make it work. How is that supposed to work?
The following does not:
components: {
global: true,
dirs: ["~/components", "~/override-components"],
}and the old Nuxt2 "level" attribute is not available anymore. I already opened a feature request for that https://github.com/nuxt/nuxt.js/issues/15625
I don't see a solution to override component without the Nuxt 3 layers feature, but that results in a bigger rebuild.
markthree
commented
1 year ago @dmaass-diva-e hello，Do you want this effect 👉 stackblitz-demo。
I changed the order. It works 👇
components: {
global: true,
dirs: ['~/override-components', '~/components'],
}But I haven't had time to see the source code, which may have potential errors 🤔
dmaass-diva-e
commented
1 year ago Thank you very much @markthree I think you are right. The solution was probably much simpler than I thought. I will test it and report back.
dmaass-diva-e
commented
1 year ago Yes, it's working 🚀 Thanks @markthree 🙂
NarHakobyan
commented
1 year ago this plugins works partially, it generates separate type definition files and editor stopping recognize nuxt's generated one.
But, TheHeader is any (is under components folder)
everatch
commented
1 year ago this plugins works partially, it generates separate type definition files and editor stopping recognize nuxt's generated one.
I got the same issue.
The definition file output from Nuxt declare module vue, but this plugin declare module @vue/runtime-core.
I tried manually changing the two files to the same module and both of then worked well!
How can i do for it with automatic creation?
Update:
~~I set version to 2.7 then it works fine.
This plugin declare module vue for me.~~
This will make resolver failed when using nuxt3.
hcwhan
commented
1 year ago this plugins works partially, it generates separate type definition files and editor stopping recognize nuxt's generated one.
But, TheHeader is any (is under components folder)
same issue
markthree
commented
1 year ago this plugins works partially, it generates separate type definition files and editor stopping recognize nuxt's generated one. But, TheHeader is any (is under components folder)
Make everything simple，Just use unplugin-vue-components if you need component library 👇
import Components from "unplugin-vue-components/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers";
export default defineNuxtConfig({
components: false, // Turn off native nuxt option
vite: {
plugins: [
Components({
dts: true,
dirs: ["components"],
directoryAsNamespace: true,
resolvers: [ArcoResolver()],
}),
],
},
});
types are available for ts。
@NarHakobyan @hcwhan @everatch
hcwhan
commented
1 year ago @markthree use this nuxt built-in components fail
now, reference https://nuxt.com/docs/guide/directory-structure/components#library-authors use modules
For example, I use naive-ui .
add /modules/naiveui.ts
import klawSync from 'klaw-sync'
import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
export default defineNuxtModule({
hooks: {
'components:dirs'() {
const { resolve } = createResolver(import.meta.url)
const scanDir = resolve('../node_modules/naive-ui/es')
const files = klawSync(scanDir, { nodir: true })
const componentFiles = files
.filter((item) => {
const relativePath = item.path.slice(scanDir.length + 1)
if (relativePath.startsWith('legacy-transfer')) {
return false
}
return /^[a-z-]+\/src\/[A-Z]\w+\.js$/.test(relativePath)
})
.map((item) => item.path)
for (const filePath of componentFiles) {
const fileName = filePath.replace(/^.*\/(\w+)\.js$/, '$1')
addComponent({
name: `N${fileName}`,
filePath,
})
}
},
},
})
@NarHakobyan @everatch
Describe the bug
I am currently in the situation that I have a kind of "base project" and another one which wants to overwrite components on a large scale.
To overwrite these components, I currently only see the possibility to use Nuxt 3 Layers. (Nuxt auto import does not support overwriting with the help of the "level" attribute anymore.
Since this would currently lead to major rebuilds in my projects, I would have liked to continue using this plugin for this. However, it does not work and I get the following error:
Reproduction link: https://stackblitz.com/edit/nuxt-starter-sfvqhu?file=nuxt.config.ts
Reproduction
https://stackblitz.com/edit/nuxt-starter-sfvqhu?file=nuxt.config.ts
System Info
Used Package Manager
pnpm
Validations