How to install the Add to Calendar Button with Nuxt

Step 1: npm installation

Install the package from the npm registry.

npm install add-to-calendar-button

Step 2: Import it

Import the module into the component, where you want to use the button.

import 'add-to-calendar-button';

Step 3: Optimize the Vue config

Theoretically, this was already it.
Vue works extremely well with Web Components.

However, you might notice a warning in the browser console.
To get rid of this, you need to provide a little bit more information to the compiler options.

This can go into your vite.config.js or other places depending on your setup. Check the official Vue documentation for more details: Click here .

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

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

In case the Add to Calendar Button is the only Web Component in your project, you could also be a little bit more explicit here.
In this case, our recommendation is to define tags, which start with "add-" as "custom elements".

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

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

Step 4: Use it

Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.

Yes, it is that simple.

Your code block could look like the following.

<add-to-calendar-button
  name="Title"
  options="'apple','google'"
  location="World Wide Web"
  start-date="2026-09-20"
  end-date="2026-09-20"
  start-time="10:15"
  end-time="23:30"
  time-zone="EST"
></add-to-calendar-button>

Styles & languages

The script ships with the "default" button style and the English language pack built in - so the button looks great and works out of the box without any extra configuration.

Every other style and language loads automatically on demand (a few KB each) the moment you reference it - no manual wiring needed.

Bundling via npm (recommended for frameworks)

When you bundle the script, import the style and language modules you need so they register fetch-free at build time. Simply add the corresponding import statements anywhere in your entry file (or the component that uses the button):

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

See the "button-style" and "language" options at the Configuration page for the full picture.

Server Side Rendering (SSR)

The button can also pre-render a shell on the server for an instant, layout-stable first paint. See the "Server-side rendering" section on the advanced-use page. Server-side rendering

A full example could look like this.

<!-- 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-09-20',
  endDate: '2026-09-20',
  startTime: '10:15',
  endTime: '23:30',
  timeZone: 'Europe/Berlin',
});

// client-side upgrade of the shell into the full button
onMounted(() => import('add-to-calendar-button'));
</script>

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

Nuxt-specific SSR notes

• Never render the generated shell with v-html: during hydration, Vue re-assigns innerHTML, which does not parse declarative shadow DOM - the pre-rendered shadow root gets destroyed (flash + console warnings). Use a directive that skips the assignment when the server markup is already in place (see the example above).
• Keep the add-to-calendar-button/ssr import strictly on the server side of your component (top-level in script setup is fine - it is DOM-free and tree-shaken from the client bundle).
• Load the main add-to-calendar-button module only on the client (e.g. via onMounted(() => import('add-to-calendar-button')) or a client-only plugin) - it registers the custom element, which upgrades the shell in place.
• Attributes work exactly like on the plain tag - including kebab-case names and bare boolean flags like buttons-list or hide-icon-button.