Imported component from custom vite vue library not updating-CodePudding

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.

CodePudding user response：

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')

CodePudding user response：

The Vite library mode is for building a common JS library that can use outside a Vue project so it will ship unnecessary node_modules along with your package (You can find it in your components/dist folder)

I recommend you use the easier way to develop a Vue library:

Firstly, use rollup build instead of vite:

// components/package.json
"scripts": {
    "build": "rollup -c",
},

Secondly, add the rollup.config.js file:

// components/rollup.config.js`
import typescript from 'rollup-plugin-typescript2';
import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss'

export default async function config (args) {
    return [{
        input: ['src/index.ts'],
        output: {
            dir: 'dist',
            format: 'es',
        },
        plugins: [
            vue(),
            typescript()
        ],
    }]
}

Lastly, remove your style from your components, we will talk about it later.

Now you can run yarn build and use your package normally. The rollup build is just transformed your Vue file into JS that allows you the ability to delivery your package to npm. It remains a Vue file and only can be used on a Vue project.

Let's talk about the style. You still need to import the CSS from your package into your project. If you are building a library, there is a good chance that consumers want to overwrite your pre-built CSS so using the scoped style is not a good idea. I suggest you create a standalone style file, scope your CSS with a unique class name and ship it along with your package. Add this config to your rollup.config.js to process your style

    {
        input: ['src/style.css'],
        output: {
            file: 'dist/style.css',
        },
        plugins: [
            postcss({
                extract: true,
                modules: false
            })
        ],
    }

This is my library that you can take as an example.