Wie man die Buttons und RSVP-Formulare mit Nuxt nutzt

Schritt 1: npm Installation

Installiere das Paket aus der npm-Registry.

npm install add-to-calendar-button

Schritt 2: Client-Plugin erstellen

Lege plugins/add-to-calendar.client.ts in deinem Nuxt-App-Verzeichnis an (bei der Standardstruktur von Nuxt 4 unter app/plugins/). Die Endung .client.ts lädt das Hauptpaket nur im Browser.

import 'add-to-calendar-button/styles/all';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button';

export default defineNuxtPlugin(() => {});

Schritt 3: Custom Element registrieren

Ergänze diese Compiler-Einstellung in deiner bestehenden Konfiguration, damit Vue das Element als Web Component erkennt.

// nuxt.config.ts
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'add-to-calendar-button',
    },
  },
});

Schritt 4: Loslegen

<template>
  <ClientOnly>
    <add-to-calendar-button prokey="prokey-deines-events"></add-to-calendar-button>
  </ClientOnly>
</template>

Bring your own button

Öffne den Button oder das Formular über einen Klickhandler als Modal. Der dynamische Import läuft erst beim Klick im Browser. Übergib das auslösende Element für die Fokussteuerung.

<script setup>
async function openEvent(event) {
  const trigger = event.currentTarget;
  const { atcb_action } = await import('add-to-calendar-button');
  atcb_action({ prokey: 'prokey-deines-events' }, trigger);
}
</script>

<template>
  <button @click="openEvent">Open event</button>
</template>

Styles und Sprachen

Das npm-Paket enthält standardmäßig nur den Standard-Style und Englisch. Das Beispiel kombiniert add-to-calendar-button/styles/all mit add-to-calendar-button/i18n/de, was gültig ist: Nutze add-to-calendar-button/styles/3d bei einem festen Style oder add-to-calendar-button/styles/all, wenn die remote verwaltete PRO-Konfiguration ihn ohne Deployment ändern kann. Importiere standardmäßig die konkrete Sprache oder eine kleine bekannte Menge, etwa add-to-calendar-button/i18n/de; nutze add-to-calendar-button/i18n/all nur, wenn Sprachen zur Laufzeit wirklich unvorhersehbar wechseln können. Beide /all-Imports vergrößern das Bundle, weil sie alle jeweiligen Dateien enthalten.

Alternativ kannst du Styles und Sprachen dynamisch von jsDelivr laden, indem du style-source="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3/dist/styles/" am Element setzt. Dieselbe Strategie gilt für eigene Trigger; in atcb_action heißt die Option styleSource.

Optional: Serverseitiges Rendering

Das Paket bietet einen separaten SSR-Einstieg für eine vorgerenderte Button-Hülle. In v3.3.0 behält diese servergerenderte Hülle ihre passenden Styles, bis der Client sie aktiviert. Nutze für PRO-Daten die asynchrone Variante auf dem Server und lade im Client-Plugin die benötigten Style- und Sprachmodule vor dem Hauptmodul. Die vollständige Interaktion und RSVP-Formulare werden weiterhin im Browser initialisiert. Siehe SSR mit PRO und die Button Nuxt Anleitung.

Verwende für die generierte SSR-Hülle nicht v-html: Vue würde beim Hydrieren die Shadow-DOM-Struktur ersetzen. Die offizielle Nuxt-Anleitung zeigt eine Direktive, die bereits vorhandenes Server-Markup erhält.