vue.js - Custom vue component library fails to resolve vuetify components when installed - Stack Overflow

admin管理员组

文章数量:1410724

I'm making a component library for vue.js components that I've created that I'd like to reuse. It's my first time making a library. I'm using vite to build it and vite's library mode to make it a library. I've run the library locally and "installed" it locally in another project using 'npm link' successfully. But when I actually download the published package it can't seem to resolve the vuetify components that I've used to create my first component. I get the following error:

[Vue warn]: Failed to resolve component: v-autocomplete
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <EmployeeAutocomplete> 
  at <Tester> 
  at <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <VMain> 
  at <VLayout> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <VApp> 
  at <App>

The component library can be found here I'm using a default vuetify project to test it. That's here

I will try to publish the package itself to my npm this evening, I think I'm blocked at work.

I'm making a component library for vue.js components that I've created that I'd like to reuse. It's my first time making a library. I'm using vite to build it and vite's library mode to make it a library. I've run the library locally and "installed" it locally in another project using 'npm link' successfully. But when I actually download the published package it can't seem to resolve the vuetify components that I've used to create my first component. I get the following error:

[Vue warn]: Failed to resolve component: v-autocomplete
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <EmployeeAutocomplete> 
  at <Tester> 
  at <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <VMain> 
  at <VLayout> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <VApp> 
  at <App>

The component library can be found here I'm using a default vuetify project to test it. That's here

I will try to publish the package itself to my npm this evening, I think I'm blocked at work.

• vue.js
• package
• vuetify.js
• vite
• rollup

Share Improve this question Follow edited Mar 11 at 0:54 Baker6Romeo asked Mar 10 at 17:54 Baker6RomeoBaker6Romeo 6566 bronze badges 4

• 1 This is primarily vite question, but the question doesn't mention it at all. You need to specify "vuetify" in vite "externals" and make "vue" and "vuetify" peerDependencies instead of dependencies in package.json – Estus Flask Commented Mar 10 at 21:57
• @EstusFlask, thanks! I still struggle with writing these well sometimes. I'll update the question and tags and implement your recommendation. I understand including vuetify in the externals. Can you help me understand why vue and vuetify need to move to peerDependencies? – Baker6Romeo Commented Mar 11 at 0:55
• They need to be installed by end user, and your lib will use user's copies, peerDependencies will prevent the deps from being duplicated – Estus Flask Commented Mar 11 at 9:48
• @EstusFlask, that didn't work. Can you take a look at my latest commit and let me know if you see anything I missed? – Baker6Romeo Commented Mar 11 at 15:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This post helped me out a lot: How to create my own component library based on Vuetify.

I think specifically changing modifying my rollupOptions in vite.config.ts is what got me there. After that I had issues with the vuetify styles not coming over, but that's because I wasn't using the right path for the import. I don't have a lot of experience modifying package.jsons so I didn't realize that the exports field is the replacement for main and module and if you use it it will block any other entry points. That, and I didn't know that whatever's in there acts as a pointer or alias. So where I was trying to import '@kcat/vue-common-components'/dist/vue-common-components.css when I should have been importing @kcat/vue-commonn-components/styles.css since one of the exports in the library's package.json is "./styles.css": "./dist/vue-common-components.css"

本文标签： vuejsCustom vue component library fails to resolve vuetify components when installedStack Overflow