Vue WebComponent mit Vue Cli erstellen

Tutorial Vue.js

von Ardian Shala, 17.04.2019
Mit der Vue Cli v3.x lässt sich eine vorhandene Vue Component sehr schnell eine WebComponent erstellen.
Vorraussetzung:
  • VueJs Cli - link
  • WebComponent Polyfills - link

Neues Projekt erstellen

Mit der Vue Cli lässt sich schnell ein Projekt wie folgt erstellen

vue create vue-web-component-project

Create Component

Nun wird eine neue Vue Component mit der Bezeichnung MyWebComponent unter components erstellt.
Der Inhalt kann wie folgt aussehen

<template>
    <div>
        <h1>Hello {{ title }}</h1>
        <div>
            <button @click="onClicked()">click me</button>
        </div>
    </div>
</template>
<script>
    export default {
        props: ["title"],
        methods: {
            onClicked: function() {
                alert("you clicked me");
            }
        }
    };
</script>

Vue WebComponent via vue-clie-service erstellen

Die zuvor erstellte Vue Component kann nun sehr einfach mittels vue-cli-service (in Vue Cli Projekt bereits enthalten) mit folgenden Einstellungen zu einer WebComponent erstellt werden.

npx vue-cli-service build --target wc --name my-custom-element ./src/components/MyWebComponent.vue

Nach erfolgreichem Erstellen der Vue WebComponent sollte im dist Ordner nun my-custom-elment als gebündeltes Script vorliegen.
Zusätzlich sollte eine demo.html Datei vorhanden sein.

Vue WebComponent nutzen

Die demo.html wird so abgeändert, dass sie die in der Component erwartete Property setzte.

...
<my-custom-element title="WebComponent"></my-custom-element>
...

Wird nun die Datei demo.html aufgerufen, sollte folgender Inhalt angezeigt werden.

Fazit

Mittels Vue Cli v3.x ist das Erstellen einer WebComponent sehr einfach. Die erstelle WebComponent kann nun überall eingesetzt werden, da sie framework-unabhängig ist. Für ältere und nicht unterstützende Browser sollten Polyfills integriert werden.

WebComponent Polyfills finden sich hier:
https://cdnjs.com/libraries/webcomponentsjs

#cli #vuecli #vuejs #webcomponent

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.