Instalación: nuxt | Add to Calendar Button

Paso 1: Instalación con npm

Instala el paquete desde el registro de npm.

npm install add-to-calendar-button

Paso 2: Importarlo

Importa el módulo en el componente donde quieras usar el botón.

import 'add-to-calendar-button';

Paso 3: Optimizar la configuración de Vue

En teoría, esto ya sería todo.
Vue funciona muy bien con Web Components.

Sin embargo, puede aparecer un aviso en la consola del navegador.
Para eliminarlo, proporciona algo más de información a las opciones del compilador.

Puedes hacerlo en vite.config.js o en otro lugar según tu configuración. Consulta la documentación oficial de Vue para más detalles: haz clic aquí .

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

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

Si Add to Calendar Button es el único Web Component del proyecto, puedes ser más específico.
En ese caso, recomendamos definir como custom elements las etiquetas que empiezan por «add-».

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

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

Paso 4: Usarlo

Empieza añadiendo una etiqueta <add-to-calendar-button> al código HTML, con las opciones como atributos.

Sí, así de sencillo.

Tu bloque de código podría ser como el siguiente.

<add-to-calendar-button
  name="Título"
  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/Madrid"
  language="es"
></add-to-calendar-button>

Estilos e idiomas

El script incluye el estilo de botón «default» y el paquete de inglés, por lo que funciona y se ve bien sin configuración adicional.

Al cargar directamente el script del navegador, los demás estilos e idiomas se descargan automáticamente cuando se necesitan (unos pocos KB cada uno). Las integraciones empaquetadas deben registrar explícitamente los módulos necesarios como se muestra abajo.

Empaquetado con npm (recomendado para frameworks)

Al empaquetar el script, importa los módulos de estilo e idioma necesarios antes del módulo principal. Así quedan registrados sin solicitudes antes de que se actualice el custom element, también durante la hidratación 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

Para cargar todos los estilos o idiomas en una sola instrucción, usa los módulos agregados: import 'add-to-calendar-button/styles/all' e import 'add-to-calendar-button/i18n/all'.

Consulta las opciones «button-style» y «language» de la página Configuración para ver todos los detalles.

Server Side Rendering (SSR)

El botón también puede prerenderizar una envoltura en el servidor para ofrecer un primer renderizado instantáneo y estable. Durante la hidratación, conserva los estilos coincidentes hasta que el botón del cliente esté completamente estilizado. Consulta la sección «Renderizado del lado del servidor» de la página de uso avanzado. Renderizado del lado del servidor

Un ejemplo completo podría ser el siguiente.

<!-- 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>

Notas de SSR específicas de Nuxt

Nunca renderices la envoltura generada con v-html: durante la hidratación, Vue vuelve a asignar innerHTML, que no interpreta Declarative Shadow DOM. Esto destruye la shadow root prerenderizada y provoca parpadeos y avisos en consola. Usa una directiva que omita la asignación si el marcado del servidor ya existe.
Mantén la importación add-to-calendar-button/ssr estrictamente en el lado del servidor del componente. Puede estar en el nivel superior de script setup: no usa el DOM y se elimina del bundle del cliente.
Carga los módulos de estilos e idiomas no predeterminados antes del módulo principal add-to-calendar-button en el cliente, o hazlo en un plugin solo de cliente. El módulo principal registra el custom element y actualiza la envoltura conservando sus estilos del servidor.
Los atributos funcionan exactamente igual que en la etiqueta normal, incluidos los nombres kebab-case y los booleanos sin valor como buttons-list o hide-icon-button.

Cómo instalar Add to Calendar Button con Nuxt