Can Vue CLI build a library for Vue 3?
Question
I would like to build a Vue library using Vue CLI. The project prefers a built library over a fully built app. The library build works, but the library does not work in combination with Vue 3. Let me elaborate...
First create a simple Vue 3 application. Something like command vue create builds. Then build the library using:
vue build App.vue -t lib
This results in some compiled files, one of them is App.umd.js . When using Vue 2 and the following init code, it works fine.
<body>
<div id="app">
<demo></demo>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script src="./dist/App.umd.js"></script>
<script>
new Vue({
components: {
demo: App
}
}).$mount('#app')
</script>
</body>
But when using Vue 3 and the following init code, it will result in a JavaScript error.
<body>
<div id="app">
<demo></demo>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="./dist/App.umd.js"></script>
<script>
Vue.createApp({
components: {
demo: App
}
}).mount('#app')
</script>
</body>
The JavaScript error is:
Uncaught TypeError: Cannot read property '_c' of undefined
at Proxy.render (App.vue?19ce:1)
I assume Vue CLI should be able to build a library for Vue 3. Can this be achieved?
I use @vue/cli 4.5.13 which is the latest at this time of writing.
2 answers
solution1
1
I'm assuming you're using the same Vue 2 library in both Vue 2 and Vue 3 applications. So when you try to use a Vue 2 library in a Vue 2 app it works, but when you try to use a Vue 2 library in a Vue 3 app it doesn't work?
Vue 3 is not reverse compatible with Vue 2, so that's why.
You'd need to build you library with Vue 3 to use it in a Vue 3 app.
You could also give https://www.npmjs.com/package/vue-demi a try
solution2
0 2022-05-18 00:01:20
The Vue SFC rollup package allows you to do that
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.