Using Termageddon with VueJS websites

Pre Requisites:

• Using npm install

  • npm install axios

• in your main.js file, you will need to import axios

  • import axios from 'axios';

• add axios to window

  • window.axios = axios;

Add the Termageddon Component:

• create a new vue component called Termageddon.vue and past the following code inside the new component file

<template>
  <div id="privacy-policy" v-html="policy"></div>
</template>

<script>
    export default {
      name: 'Termageddon',
        props: ['policyKey'],
        data() {
            return {
              policy: {},
            }
        },
        methods: {
          getPolicy(){
            axios.get('https://policies.termageddon.com/api/policy/' + this.policyKey).then(response => {
              this.policy = response.data;
            })
          }

        },

        mounted() {
          this.getPolicy();
        }
    }
</script>

<style scoped>
#privacy-policy {
  margin: 0 auto;
  padding: 10px;
  text-align: left;
}
</style>

• import the new component in your main.js file

  • import Termageddon from “@components/Termageddon.vue”;

    • now this location might vary based on where you place your component file

• register this component in main.js

createApp(App)
    .component('termageddon', Termageddon)
    .use(store).use(router).mount('#app')

• Note, this is using VueJs 3 with Vue Router and Vue Store, this might vary based on your version of VueJs

Using the new Termageddon Compoent

• Add the new component to your page

  • Paste the following to your page, replace “<Your Policy Key>” With the policy key from Termageddon

  • <Termageddon policy-key="<Your Policy Key>"></Termageddon>