How to install the Add to Calendar Button with Vue 3

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"
  startDate="2024-11-22"
  endDate="2024-11-22"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
></add-to-calendar-button>