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.

user10706046 · Accepted Answer · 2021-08-26 20:14:51Z

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

answered Aug 26, 2021 at 20:14

user10706046

Sign up to request clarification or add additional context in comments.

1 Comment

Jorr.it Over a year ago

That is why I ask how Vue CLI can build a library for Vue 3.

Ejiro Asiuwhu · Accepted Answer · 2022-05-18 00:01:20Z

0

The Vue SFC rollup package allows you to do that

answered May 18, 2022 at 0:01

Ejiro Asiuwhu

3303 silver badges7 bronze badges

Collectives™ on Stack Overflow

Can Vue CLI build a library for Vue 3?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related