Acapedia - Vue component using the featureFlagsMixin

FeatureFlagComponent.vue

<template>
  <div>
    <div :class="{'new-feature': isFeatureActive, 'old-feature': !isFeatureActive}">
      <!-- Content goes here when MILESTONE_NEW_FEATURE_ENABLED is enabled/disabled -->
      <button @click="fetchData">Fetch Data</button>
      <div v-if="apiData">{{ apiData }}</div>
    </div>

    <p>{{ computedMessage }}</p>
  </div>
</template>

<script>
import axios from 'axios';
import { featureFlagsMixin, MILESTONE_NEW_FEATURE_ENABLED } from '@/mixins/featureFlagsMixin';

export default {
  name: 'MyComponent',
  mixins: [featureFlagsMixin({
    [MILESTONE_NEW_FEATURE_ENABLED]: 'isFeatureActive',
  })],
  data() {
    return {
      // Add property if the feature isFeatureActive is active
      optionalDataField: this.isFeatureActive ? 'This is an optional value' : undefined,
      apiData: null,
    };
  },
  computed: {
    computedMessage() {
      return this.isFeatureActive
        ? 'The feature MILESTONE_NEW_FEATURE_ENABLED is enabled.'
        : 'The feature MILESTONE_NEW_FEATURE_ENABLED is disabled.';
    },
  },
  methods: {
    async fetchData() {
      if (this.isFeatureActive) {
        try {
          const response = await axios.get('https://api.example.com/data');
          this.apiData = response.data;
        } catch (error) {
          console.error(error);
        }
      }
    },
  },
};
</script>

<style scoped>
.new-feature {
  /* Styles go here when MILESTONE_NEW_FEATURE_ENABLED is enabled */
}

.old-feature {
  /* Styles go here when MILESTONE_NEW_FEATURE_ENABLED is disabled */
}
</style>