flagmint-vuejs-feature-flags/dist/vue2-feature.mjs

A Vue.js SDK for managing feature flags in Flagmint applications, supporting both Vue 2 and Vue 3.

import { renderSlot, createCommentVNode } from 'vue';

const useFlagsMixin = {
    data() {
        return {
            isFlagReady: false,
            flagClient: null,
        };
    },
    async created() {
        if (typeof this.$flagmintReady !== 'undefined') {
            await this.$flagmintReady;
            this.flagClient = this.$flagmint;
            this.isFlagReady = true;
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (typeof this.$flagmintReady !== 'undefined') {
                this.isFlagReady = true;
                this.$watch('$flagmintReady', (val) => {
                    this.isFlagReady = val;
                });
            }
            else if (typeof this.$flagmintInit === 'function') {
                this.$flagmintInit().then((client) => {
                    this.flagClient = client;
                    this.isFlagReady = true;
                });
            }
        });
    },
    methods: {
        getFlag(key, fallback) {
            if (this.flagClient && typeof this.flagClient.getFlag === 'function') {
                return this.flagClient.getFlag(key, fallback);
            }
            return fallback;
        }
    }
};

var script = {
  name: 'FlagmintFeature-vue2',
  mixins: [useFlagsMixin],
  props: {
    /**
     * Accepts a single feature key or an array of keys.
     * If multiple keys are provided, all must be enabled.
     */
    featureKeys: {
      type: [String, Array],
      required: true,
    },
  },
  computed: {
    isFeatureEnabled() {
      // Wait until flags have been fetched
      const keys = Array.isArray(this.featureKeys)
        ? this.featureKeys
        : [this.featureKeys];
      // Return true only if all flags are enabled
      return keys.every(key => this.getFlag(key, false));
    }
  }
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return ($options.isFeatureEnabled)
    ? renderSlot(_ctx.$slots, "default", { key: 0 })
    : createCommentVNode("v-if", true)
}

script.render = render;
script.__file = "sdk/vue2/component/Feature.vue";

export { script as default };