CODEWITHSUNDEEP
vue.jsvuejs3vue-clivue-cli-4
Jorr.it
Jorr.it

Reputation: 1300

Can Vue CLI build a library for Vue 3?

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.

Upvotes: 2

Views: 976

Answers (2)

Ejiro Asiuwhu
Ejiro Asiuwhu

Reputation: 200

The Vue SFC rollup package allows you to do that

Upvotes: 0

user10706046
user10706046

Reputation:

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

Upvotes: 1

Related Questions