Install the package from the npm registry.
npm install add-to-calendar-button
Import the module into the component, where you want to use the button.
import 'add-to-calendar-button';
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-')
}
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-10-20"
endDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
></add-to-calendar-button>
Not your tech stack?
Check out the "Installation" section!
We have strong guides and solutions for all big frontend stacks as well things like WordPress.
Find complete project examples per stack at Stackblitz: Click here .
More functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.