Skip to main content

Vue

Install​

npm install @flipfeatureflag/vue @flipfeatureflag/js

Plugin​

import { createApp } from "vue";
import { createFlipFlag } from "@flipfeatureflag/vue";

const app = createApp(App);
app.use(
  createFlipFlag({
    config: {
      url: "https://api.example.com",
      sdkKey: "YOUR_SDK_KEY",
      env: "prod",
    },
  }),
);

Composables​

import { useFlag, useVariant, useFlagsStatus, useUpdateContext } from "@flipfeatureflag/vue";

export default {
  setup() {
    const { enabled, value } = useFlag("new_checkout");
    const variant = useVariant("new_checkout");
    const status = useFlagsStatus();
    const updateContext = useUpdateContext();

    return { enabled, value, variant, status };
  },
};

Updating context after login (Vue)​

import { useUpdateContext } from "@flipfeatureflag/vue";

export default {
  setup() {
    const updateContext = useUpdateContext();

    function onLogin(userId) {
      updateContext({ userId });
    }

    return { onLogin };
  },
};

Reason semantics​

reason is interpreted as:

  • rule_match — a targeting rule matched.
  • fallthrough — flag enabled, no rules matched (or no rules).
  • default — backend returned the default path for an existing flag.
  • disabled — flag disabled on backend.