@configdirector/vue-sdk

ConfigDirector Vue SDK

Vue SDK for ConfigDirector, remote config and feature flags with typed values, JSON Schema validation, and safe renames of live flags. Start free, no card required.

Install

npm install --save @configdirector/vue-sdk

Retrieve a value

// main.ts
import { ConfigDirectorPlugin } from "@configdirector/vue-sdk";

app.use(ConfigDirectorPlugin, { sdkKey: "YOUR-CLIENT-SDK-KEY" });

<script setup lang="ts">
import { useConfigValue } from "@configdirector/vue-sdk";

const { value: darkMode } = useConfigValue("dark-mode", false);
</script>

Full details are in the official documentation.

Test your code

@configdirector/vue-sdk/testing creates a real client connected to an in-memory server that your test controls. Install the production plugin with the test client's client, as you would with a pre-initialized client.

import { nextTick } from "vue";
import { render, screen } from "@testing-library/vue";
import { ConfigDirectorPlugin } from "@configdirector/vue-sdk";
import { createTestClient } from "@configdirector/vue-sdk/testing";

const testClient = createTestClient({ values: { "dark-mode": true } });

render(App, { global: { plugins: [[ConfigDirectorPlugin, testClient.client]] } });
await screen.findByText("dark-mode: true");

testClient.setValue("dark-mode", false);
await nextTick();
screen.getByText("dark-mode: false");

The plugin initializes a client that is neither ready nor initializing, so the first assertion uses findBy…; a client initialized before app.use is ready on the first render. Await nextTick() after setValue, removeValue, and replaceValues. The test client also holds or fails initialize and updateContext, and records every context in contextUpdates.

Documentation

Refer to the official documentation for the Vue SDK.

There is also a quickstart guide for ConfigDirector and any of our SDKs.

Getting Help

• Ask a question in Discussions
• Contact support