Installation: nuxt | Add to Calendar Button

Étape 1: Installation npm

Installez le paquet depuis le registre npm.

npm install add-to-calendar-button

Étape 2: Importation

Importez le module dans le composant où vous souhaitez utiliser le bouton.

import 'add-to-calendar-button';

Étape 3: Optimiser la configuration Vue

En théorie, tout est déjà prêt.
Vue fonctionne très bien avec les Web Components.

Vous pouvez toutefois voir un avertissement dans la console du navigateur.
Pour le supprimer, fournissez quelques informations supplémentaires aux options du compilateur.

Cela peut se placer dans vite.config.js ou ailleurs selon votre configuration. Consultez la documentation officielle de Vue pour plus de détails: cliquez ici .

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

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

Si Add to Calendar Button est le seul Web Component de votre projet, vous pouvez être plus explicite.
Nous recommandons alors de déclarer comme custom elements les balises commençant par « add- ».

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

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

Étape 4: Utilisation

Commencez par ajouter une balise <add-to-calendar-button> à votre code HTML, avec les options sous forme d’attributs.

Oui, c’est aussi simple que cela.

Votre bloc de code pourrait ressembler à ceci.

<add-to-calendar-button
  name="Titre"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-10-18"
  end-date="2026-10-18"
  start-time="10:15"
  end-time="23:30"
  time-zone="Europe/Paris"
  language="fr"
></add-to-calendar-button>

Styles et langues

Le script inclut le style de bouton « default » et le pack anglais : le bouton est donc immédiatement fonctionnel et agréable sans configuration supplémentaire.

Lorsque vous chargez directement le script navigateur, les autres styles et langues sont chargés automatiquement à la demande (quelques Ko chacun). Les intégrations groupées doivent enregistrer explicitement les modules requis comme ci-dessous.

Bundling via npm (recommandé pour les frameworks)

Lors du bundling, importez les modules de style et de langue requis avant le module principal. Ils sont ainsi enregistrés sans requête avant la mise à niveau du custom element, y compris pendant l’hydratation SSR :

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

Pour charger tous les styles ou toutes les langues en une seule instruction, utilisez les modules agrégés : import 'add-to-calendar-button/styles/all' et import 'add-to-calendar-button/i18n/all'.

Consultez les options « button-style » et « language » sur la page Configuration pour tous les détails.

Server Side Rendering (SSR)

Le bouton peut aussi pré-rendre une enveloppe sur le serveur pour un premier affichage instantané et stable. Pendant l’hydratation, le composant conserve les styles correspondants jusqu’à ce que le bouton client soit entièrement stylé. Consultez la section « Rendu côté serveur » de la page d’utilisation avancée. Rendu côté serveur

Un exemple complet pourrait ressembler à ceci.

<!-- 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-18',
  endDate: '2026-10-18',
  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>

Remarques SSR propres à Nuxt

Ne rendez jamais l’enveloppe générée avec v-html : pendant l’hydratation, Vue réaffecte innerHTML, qui ne parse pas le Declarative Shadow DOM. La shadow root pré-rendue serait détruite (flash et avertissements console). Utilisez une directive qui ignore cette affectation lorsque le balisage serveur est déjà présent.
Conservez l’import add-to-calendar-button/ssr strictement côté serveur du composant. Un import au niveau supérieur de script setup convient : cette entrée est sans DOM et retirée du bundle client.
Chargez les modules de style et de langue non standards avant le module principal add-to-calendar-button côté client, ou dans un plugin client-only. Le module principal enregistre le custom element et met à niveau l’enveloppe tout en conservant ses styles serveur.
Les attributs fonctionnent exactement comme sur la balise simple, y compris les noms en kebab-case et les booléens sans valeur tels que buttons-list ou hide-icon-button.

Comment installer Add to Calendar Button avec Nuxt