# Vuejs

Changelogfy have a npm package to use with Vuejs.

Installation

npm install changelogfy-vuejs

Import our component inside your code:

<template>
  <div>
    <div class="links">
      <a href="#" class="changelogfy-icon">
        Open Widget
        <Changelogfy
          app-id="INSERT_YOUR_API_TOKEN_HERE"
          selector=".changelogfy-icon"
        />
      </a>
    </div>
  </div>
</template>

<script>
import Changelogfy from "changelogfy-vuejs";
export default {
  components: {
    Changelogfy,
  },
};
</script>

You can enable or disable badge init:

init-badge: false // default true

Pro Plan

If you plan are in Pro Plan, you can pass user data for component:

<template>
  <div>
    <div class="links">
      <a href="#" class="changelogfy-icon">
        Open Widget
        <Changelogfy
          app-id="INSERT_YOUR_API_TOKEN_HERE"
          selector=".changelogfy-icon"
          user-id="123"
          user-name="Paulo Castellano"
          user-email="paulo@changelogfy.com"
          :is-following="false"
          :custom-data="{
            Job_Role: 'CEO',
            Plan: 'Pro',
            teammates: '4',
            Monthly_Spend: '50 USD',
          }"
        />
      </a>
    </div>
  </div>
</template>

<script>
import Changelogfy from "changelogfy-vuejs";
export default {
  components: {
    Changelogfy,
  },
};
</script>

Extras: