Vuetify not working with bit component when I import and use it in NUXT project

[subham25997]

My Workspace

• Created a Button Component in my workspace as follow:

• Setup vuetify as dependency: bit deps set ui/button-component vuetify --peer

• Tagged and exported the component to remote scope.

NUXT APP

• Created a NUXT app with Vue 3 and Vuetify 3

• Initialized it as a bit workspace using bit init

• Imported the Button Component and used it as follow:

• It doesn't apply vuetify. (It works with other normal component but not on Bit component.)

Getting error:

Specifications

• Bit version: 1.7.3
• Node version: v16.17.0
• npm version: 8.15.0

[Jinjiang]

I suggest:

1. if you set vuetify as a peer dep, you have to ensure it's well-installed where you consume your components. Here that means the new workspace you have created.

2. the v-btn is usually registered by an auto-import plugin like https://www.npmjs.com/package/vite-plugin-vuetify or https://www.npmjs.com/package/webpack-plugin-vuetify. I guess it's not well-configured in your workspace. Another way to make it works is explicitly importing it in your app like:

   <script setup>
   import { VBtn } from 'vuetify/components'
   </script>
   
   <template>
     <v-btn>...</v-btn>
   </template>

[subham25997]

Thank you! It worked.