Integrating Fundraise Up with a Website Powered by Vue.js
Fundraise Up can be seamlessly integrated into websites powered by Vue.js, a popular JavaScript framework for building user interfaces.
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:
- In your Vue.js project, navigate to the
publicdirectory. - Inside the
publicdirectory, open theindex.htmlfile. - Paste the Fundraise Up installation code inside the
<head>section of theindex.htmlfile. 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 donor 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.