Nectar of the Programming Masses
    Wondering what’s next for npm?Check out our public roadmap! »

    @incognitus/client-vue
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Incognitus Feature Flag (Vue 2 & 3)

    Continuous Integration codecov

    Usage

    Install this as your projects's dependency

    Vue 2

    npm i @incognitus/client-vue
    # or
    yarn add @incognitus/client-vue
    

    Vue 3

    npm i @incognitus/client-vue@next
    # or
    yarn add @incognitus/client-vue@next
    

    Installing the plugin

    Before you're able to use the service you'll need to install the plugin with your tenant and application IDs.

    main.ts - vue 2

    import { incognitus } from '@incognitus/client-vue';
    
    Vue.use(incognitus, {
      tenantId: '{your tenant key}',
      applicationId: '{your app id}',
    });

    main.ts - vue 3

    import { incognitus } from '@incognitus/client-vue';
    
    createApp(App)
      .use(incognitus, {
        tenantId: '{your tenant key}',
        applicationId: '{your app id}',
      })
      .mount('#app');
    Key Description
    tenantId Your tenant id
    applicationId The id of the application and environment

    Checking features

    Component

    You can use the included component to check feature flags. This is transparent and will not add an extra depth in the DOM. Using slots, you can configure different aspects like the loading state, or if the flag is enabled/disabled.

    <template>
      <feature-flag flag="feature name">
        <template #loading> Checking features </template>
        <template #enabled> Something behind the flag </template>
        <template #disabled> The old implementation </template>
      </feature-flag>
    </template>

    Props

    Prop Description
    flag The name of the feature flag
    hidden Hide content when the flag is enabled

    Slots

    Slot Description
    loading Displayed when fetching the feature flag
    enabled Rendered when the flag is enabled
    disabled Rendered when the flag is disabled

    Composition API hook

    If you would like to interact with the service directly, then it can be accessed through the useIncognitus hook. This returns isReady which returns true when the service is initiatlized and ready to be used, and service which returns the raw service

    Service methods

    Method Description
    service.isEnabled(featureName) Checks if the flag is enabled
    service.isDisabled(featureName) Check if the flag is disabled
    service.getFeature(featureName) Fetches the feature from the server and returns it's status
    service.getAllFeatures() Fetches all features and stores them in the cache

    Service

    You can also use the service directly by importing IncognitusService.instance, however this is not recommended.

    Caching

    Currently all known feature flags are cached when the app initializes. New features that are not found in the cache are retrieved on-demand. The cache stays in place until the app is reloaded or by calling the getAllFeatures() method on the service.

    Install

    npm i @incognitus/client-vue

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    22.6 kB

    Total Files

    26

    Last publish

    Collaborators

    • avatar
    • avatar