Integrating Fundraise Up with a website powered by Vue.js

Installing Fundraise Up in a Vue.js application

To use Fundraise Up in a Vue.js application, you need to add the Fundraise Up installation code to your project. Follow these steps:

1. In your Vue.js project, navigate to the public directory.
2. Inside the public directory, open the index.html file.
3. Paste the Fundraise Up installation code inside the <head> section of the index.html file. This ensures that the installation code runs in the head of the resulting web pages.

Using Fundraise Up Elements as Vue.js components

Once the installation code is in place, you can treat each Fundraise Up Element as its own component within your Vue.js application. Follow Vue.js best practices for creating and managing components.

Here’s an example of how you can integrate a Fundraise Up Element into a Vue.js component:

1<template>
2  <a href="#XXXXXXXX" style="display: none"></a>
3</template>
4
5<script>
6export default {
7  name: 'DonateButton'
8}
9</script>

Considerations for Vue.js single-page applications

When using Fundraise Up in a Vue.js single-page application (SPA), it’s important to keep in mind that SPAs do not reload the page. As a result, the functionality of some URL-based element display and limitation features may be affected.

In an SPA, the URL detected for a user visiting the application is always tied to the first page they visited. This can impact the behavior of Fundraise Up Elements that rely on URL-based targeting or limitations such as Overlay Elements and Sticky Buttons.