Wie man den Add to Calendar Button mit Nuxt nutzt

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"
  start-date="2026-10-03"
  end-date="2026-10-03"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Berlin"
  language="de"
></add-to-calendar-button>

Stile & Sprachen

Das Skript wird mit dem "default"-Button-Style und dem englischen Sprachpaket ausgeliefert - der Button sieht also von Haus aus gut aus und funktioniert ohne jegliche zusätzliche Konfiguration.

Wenn du das Browser-Skript direkt lädst, werden weitere Styles und Sprachen automatisch bei Bedarf geladen (jeweils wenige KB). Bei gebündelten Integrationen solltest du die benötigten Module wie unten gezeigt explizit registrieren.

Bundling via npm (empfohlen für Frameworks)

Wenn du das Skript bundlest, importiere die benötigten Style- und Sprachmodule vor dem Hauptmodul. So sind sie ohne Netzwerk-Anfrage registriert, bevor das Custom Element übernimmt - auch bei der SSR-Hydration:

import 'add-to-calendar-button/styles/3d';   // any style besides "default"
import 'add-to-calendar-button/i18n/de';       // any language besides English
import 'add-to-calendar-button';             // load the component last

Um alle Styles oder alle Sprachen in einer Anweisung zu laden, nutze die Aggregat-Module: import 'add-to-calendar-button/styles/all' und import 'add-to-calendar-button/i18n/all'.

Siehe die Optionen "button-style" und "language" auf der Konfigurations-Seite für alle Details.

Server Side Rendering (SSR)

Der Button kann zusätzlich eine Hülle auf dem Server vor-rendern - für ein sofortiges, layout-stabiles erstes Rendern. Bei der Hydration behält die Komponente die passenden Styles der Hülle bei, bis der Client-Button vollständig gestylt ist. Siehe den "Server-seitiges Rendern"-Abschnitt auf der Profi-Funktionen-Seite. Server-seitiges Rendern

Ein komplettes Beispiel könnte so aussehen.

<!-- any .vue file in your Nuxt app -->
<script setup>
import { atcb_generate_ssr_html } from 'add-to-calendar-button/ssr';

// hydrate the shell without re-parsing it: v-html would re-assign innerHTML
// during hydration, which does not parse declarative shadow DOM and would
// destroy the pre-rendered shadow root (visible flash + console warnings)
const vSsrHtml = {
  mounted(el, binding) {
    if (el.querySelector('add-to-calendar-button')) return; // already server-rendered
    el.innerHTML = binding.value;
  },
  getSSRProps: (binding) => ({ innerHTML: binding.value }),
};

const ssrHtml = atcb_generate_ssr_html({
  name: 'Reminder to check the add-to-calendar-button demo',
  options: ['Apple', 'Google'],
  location: 'World Wide Web',
  startDate: '2026-10-03',
  endDate: '2026-10-03',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
  buttonStyle: '3d',
  language: 'de',
});

// register split assets first, then upgrade the shell into the full button
onMounted(async () => {
  await Promise.all([
    import('add-to-calendar-button/styles/3d'),
    import('add-to-calendar-button/i18n/de'),
  ]);
  await import('add-to-calendar-button');
});
</script>

<template>
  <div v-ssr-html="ssrHtml"></div>
</template>

Nuxt-spezifische SSR-Hinweise

• Rendere die erzeugte Hülle niemals mit v-html: bei der Hydration setzt Vue innerHTML erneut, was Declarative Shadow DOM nicht parst - die vorgerenderte Shadow-Root wird zerstört (Flackern + Konsolen-Warnungen). Nutze eine Direktive, die die Zuweisung überspringt, wenn das Server-Markup bereits vorhanden ist (siehe Beispiel oben).
• Halte den add-to-calendar-button/ssr-Import strikt auf der Server-Seite deiner Komponente (Top-Level im Script-Setup ist ok - der Eintrag ist DOM-frei und wird aus dem Client-Bundle tree-geshaked).
• Lade nicht-standardmäßige Style- und Sprachmodule im Client vor dem Hauptmodul add-to-calendar-button (oder entsprechend in einem Client-Only-Plugin). Das Hauptmodul registriert das Custom Element, welches die Hülle übernimmt und deren passende server-gerenderte Styles beibehält.
• Attribute funktionieren exakt wie beim Plain-Tag - inklusive kebab-case-Namen und Bare-Boolean-Flags wie buttons-list oder hide-icon-button.