Wie man den Add to Calendar Button unter Vue 3 installiert

Schritt 1: npm Installation

Installiere das Package über die npm Registry.

npm install add-to-calendar-button

Schritt 2: Import

Importiere das Modul in deine Komponente, in welcher du den Button nutzen möchtest.

import 'add-to-calendar-button';

Schritt 3: Optimiere die Vue-Konfiguration

Theoretisch war es das schon.
Vue funktioniert wunderbar mit Web Components.

Allerdings wirst du feststellen, dass die Anwendung in deiner Browser-Konsole eine Warnung wirft.
Um diese aufzulösen musst du dem Compiler ein paar mehr Informationen mitgeben.

Dies geschieht tendenziell in der vite.config.js. Je nach Umgebung kannst du es aber auch an anderen Stellen integrieren. Prüfe hierzu die offizielle Vue Dokumentation: Hier klicken .

// vite.config.js or vite.config.ts

compilerOptions: {
  isCustomElement: (tag) => tag.includes('-')
}

Für den Fall, dass der Add to Calendar Button der einzige Web Component in deinem Projekt ist, kannst du hierbei auch etwas konkreter werden.
Unsere Empfehlung wäre hier, Tags, die mit "add-" starten, pauschal als "Custom Elements" zu definieren.

// vite.config.js or vite.config.ts

compilerOptions: {
  isCustomElement: (tag) => tag.startsWith('add-')
}

Schritt 4: Loslegen

Beginne mit der Nutzung, indem du einen <add-to-calendar-button> Tag in deinem HTML-Quellcode einfügst - mit den Optionen als Attribute.

Ganz genau - es ist derart einfach.

Dein Code kann hierbei bspw. wie folgt aussehen.

<add-to-calendar-button
  name="Titel"
  options="'Apple','Google'"
  location="World Wide Web"
  startDate="2024-12-23"
  endDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="Europe/Berlin"
  language="de"
></add-to-calendar-button>