How install the Widget with VueJS

The Widget works fine with vue 2 and vue 3.

Example using Vue 2

<template>
  <div id="app"></div>
</template>

<script>
export default {
  async mounted() {
    await this.loadScript();
    await this.startChangelogfy();
  },

  methods: {
    async loadScript() {
      const script = document.createElement('script');
      script.setAttribute('src', 'https://widget.changelogfy.com/index.js');
      script.async = true;
      document.head.appendChild(script);
    },

    async startChangelogfy() {
      window.CLF_config = {
        app_id: "YOUR_APP_ID"
      };
    },
  },
};
</script>

Example using Vue 3:

<script setup>
import { onMounted, ref } from "vue";

const loadScript = async () => {
  const script = document.createElement("script");
  script.setAttribute("src", "https://widget.changelogfy.com/index.js");
  script.async = true;
  document.head.appendChild(script);
};

const startChangelogfy = async () => {
  window.CLF_config = {
    app_id: "YOUR_APP_ID"
  };
};

onMounted(async () => {
  await loadScript();
  await startChangelogfy();
});
</script>

You can use all the Widget API methods with VueJS.

Want to know more about the Widget API ? Read: Widget API

Updated on: 10/23/2023