Simple Flipper API for your app

flipper.js

// Plain ol' JavaScript module for fetching feature flags from the server
//
//   import { isEnabled } from './flipper.js'
//
//   if (await isEnabled("new_feature")) {
//     // render new feature
//   } else {
//     // render old feature
//   }
//
const features = fetch("/flipper.json").then(response => response.json());

export async function isEnabled(key) {
  return await features.then(features => features[key]);
};

flipper_controller.rb

class FlipperController < ApplicationController
  # Returns the value of all feature flags for the current user
  def index
    features = Flipper.features.map do |feature|
      [feature.name, Flipper.enabled?(feature.key, current_user)]
    end

    render json: features.to_h
  end
end

routes.rb

Rails.application.routes.draw do
  resources :flipper, controller: "flipper", only: [:index]
end

vue.js

// Vue composable to fetch feature flags from the server
//
//   import { useFlipper } from "@/composables/useFlipper.js"
//   const { isEnabled } = useFlipper('featurename')
//
//   // template
//   <div v-if="isEnabled">…</div>
//
import { useFetch } from '@vueuse/core'
import { reactive, computed } from 'vue'

const fetch = reactive(useFetch('flipper', { immediate: false }).get().json())

export function useFlipper (feature, defaultValue = false) {
  // Fetch flipper data if it hasn't been fetched yet
  if (!fetch.isFetching && !fetch.isFinished) fetch.execute()

  return {
    isEnabled: computed(() => fetch.data?.[feature] ?? defaultValue)
  }
}