Export two components as library

Question

I have a TypeScript Vue project. Inside of this project I have two components: Cookiebar and CookiebarOpener (CbOpener). My goal is to export these two components as a library so I can use them at three different websites like:

<p>Some website content</p>
<div id="app">
    <cookiebar></cookiebar>
    <span>Other website content<span>
    <cbopener>
       <span>Open layer</span>
    </cbopener>
</div>

I have tried to export the library via "build-cookiebar": "vue-cli-service build --target lib --name cookiebar src/components/cookiebar.vue src/components/cbopener.vue " but only the cookiebar without the cbopener is exported.

Do you have any guesses?

Answer 1

Your build command should be:

vue-cli-service build --target lib --name dummylib src/main.js

and your src/main.js file should thus look like something like:

import cookiebar from './src/components/cookiebar.vue'
import cbopener from './src/components/cbopener.vue'

export default {
  cookiebar,
  cbopener
}

I've actually write an entire post about this topic that you can find here: https://medium.com/@olivierpicault/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

Cheers