Please enable JavaScript to view this website.

How to install the Add to Calendar Button with Nuxt 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.

  location="World Wide Web"
Get blown away by the PRO offering

Discover the PRO offering

More functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.

Legal Notice | Privacy Policy | License | Help
© 2024 , Current Version: 2.6.18