How to use a Vue component library in browser?

Question

I have a Vue component library. I built for browser via rollup. But I can't use in browser with CDN. What am I doing wrong? I've tried with <script type="module"> and a lot of other things. Here is an example:

<div id="app">
  <MultiSplitPane split="horizontal" height="400px" width="1000px">
    <Pane>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </MultiSplitPane>
</div>


<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'; 
  import { MultiSplitPane, Pane } from 'https://raw.githubusercontent.com/dgknca/vue-multi-split-pane/master/dist/vue-multi-split-pane.esm.js'; 
  
new Vue({ 
  el: '#app', 
  components: { MultiSplitPane, Pane } 
})
</script>

Also tried this

new Vue({
  el: '#app'
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://raw.githubusercontent.com/dgknca/vue-multi-split-pane/master/dist/vue-multi-split-pane.min.js"></script>

<div id="app">
  <MultiSplitPane
    split="horizontal"
    height="400px"
    width="1000px"
    resizerWidth="30px"
    classes="v-pane-custom">
    <Pane>
      <template v-slot:resizer>
        resizer slot
      </template>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </MultiSplitPane>
</div>

Answer 1

I bundle my component with rollup and found the correct way to define component. This works like I want.

Vue.component('MultiSplitPane', VueMultiSplitPane.MultiSplitPane)
Vue.component('Pane', VueMultiSplitPane.Pane)

new Vue({
  el: '#app'
})

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
body {
  font-family: 'Fira Code', monospace;
  background: #d8d1d9;
}

.v-pane-custom .v-pane .content {
  background: #fff;
}

.v-pane-custom .content .innerContent {
  padding: 20px;
  line-height: 1.5;
}

.paneNested>.content>.innerContent {
  padding: 0;
}

<div id="app">
  <multi-split-pane split="horizontal" height="400px" width="1000px" resizerWidth="30px" classes="v-pane-custom">
    <Pane>
      <template v-slot:content>
        Content 1
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 2
      </template>
    </Pane>
    <Pane>
      <template v-slot:content>
        Content 3
      </template>
    </Pane>
  </multi-split-pane>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-multi-split-pane@1.1.1/dist/vue-multi-split-pane.min.js"></script>

Answer 2

I think you should use Bili to build your library: https://github.com/egoist/bili

try with this configuration in bili.config.js:

const magicImporter = require('node-sass-magic-importer');

module.exports = {
  banner: true,
  output: {
    extractCSS: false,
  },
  plugins: {
    vue: {
      css: true
    },
    style: {
      preprocessOptions: {
        scss: {
          importer: magicImporter(),
        },
      },
    },
  }
};

and in your package.json:

    "build": "vue-cli-service build --target lib --inline-vue src/index.js"

After this you can bundle your library with npm run build and you will have bundled js / css files in your dist/ directory, if you load that JS and CSS in your browser in a HTML file you can use component in any website.

Do not miss in your index.js to mount your component to an element, like this:

import Vue from 'vue';
import MyComponent from "./MyComponent.vue";

new Vue({
    el: '#my-component',
    render: h => h(MyComponent)
  })