I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.
I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.
The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.
Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342
I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.
Any help is greatly appreciated.
In your components folder run :
yarn build
then run :
yarn link
in my-vite-app folder run :
yarn link "components"
in the maint.ts import the style :
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')
I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:
node_modules
|
--components
|
--node_modules <-- the culprit here
Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.
To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.
components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"yarn to install the package and yarn dev to run the app and see if your components work.