Simple Webcomponents

Package.json

{
    "name": "webcomponents",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "parcel build src/index.js -d  ../../dist/webcomponents/ -o my --public-url ./ --target browser --no-source-maps",
        "watch": "parcel watch src/index.js -d  ../../dist/webcomponents/ -o my --public-url ./ --target browser --no-source-maps"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@vue/web-component-wrapper": "^1.3.0",
        "sass-loader": "^10.1.1",
        "vue": "^2.6.12"
    },
    "devDependencies": {
        "@vue/component-compiler-utils": "^3.2.0",
        "cssnano": "^4.1.10",
        "sass": "^1.32.8",
        "vue-template-compiler": "^2.6.12",
        "parcel-bundler": "1.12.4"
    }
}

index.js

// if u not have global vue from other fluff replace window.vue with Vue
// import Vue from 'vue';
import Wrap from '@vue/web-component-wrapper'

window.customElements.define('my-codeblock', Wrap(window.vue, () => import('./webcomponents/codeblock.vue')));
window.customElements.define('my-icon', Wrap(window.vue, () => import('./webcomponents/Icon.vue')));
window.customElements.define('my-loader', Wrap(window.vue, () => import('./webcomponents/Loader.vue')));

Sample component

<template>
    <div :style="compStyle">
        <component :is="type" v-if="show" :color="color"></component>
    </div>
</template>

<script>
import Beat from '../components/Loader/Beat';

export default {
    name: 'Spinner',
    components: {
        beat: Beat,
    },
    props: {
        type: {
            type: String,
            default: 'beat',
        },
        show: {
            type: Boolean,
            default: true,
        },
        color: {
            type: String,
            default: '#aaa',
        },
        size: {
            type: String,
            default: '30px',
        },
    },
    computed: {
        compStyle() {
            return {
                width: this.size,
                height: this.size,
                margin: 'auto',
            };
        },
    },
};
</script>

<style>
</style>