vue3-app-configuration
Vue 3 plugin that provides an easy way to manage feature flags in your Vue 3 application through Azure App Configuration. This plugin allows you to use feature flags and toggle between different environments.
Installation
npm install vue3-app-configuration
Get started
To integrate vue3-app-configuration into your application, you'll need to initialize it in your main application file, usually named main.ts or main.js. You can either fetch your feature flags before or after the app has mounted, depending on your specific requirements and preferences.
After the app has mounted (non-blocking)
In this setup, feature flags are reactive and synchronous.
import { createApp } from "vue";
import App from "./App.vue";
import { AppConfigurationPlugin } from "vue3-app-configuration";
const app = createApp(App);
app.use(AppConfigurationPlugin, {
connectionString: "your-azure-configuration-readonly-connection-string",
cacheEnabled: true, // optional, defaults to true
flagsToPrefetchOptimistic: [{ name: "featureFlag1" }], // optional
});
app.mount("#app");Before the app has mounted (blocking)
In this setup, feature flags are also reactive, but fetched before your application mounts.
import { createApp } from "vue";
import App from "./App.vue";
import { AppConfigurationPluginAsync } from "vue3-app-configuration";
const app = createApp(App);
app.use(AppConfigurationPluginAsync, {
connectionString: "your-azure-configuration-readonly-connection-string",
flagsToPrefetch: [{ name: "featureFlag1" }],
});
AppConfigurationPluginAsync.isReady().then(() => {
app.mount("#app");
});Remember to replace 'your-azure-configuration-readonly-connection-string' with your actual connection string. For help with setting up a connection string and using feature flags in Azure, check out this guide: Feature Flags in Vue with Azure App Configuration.
Vue component usage
<script setup lang="ts">
import { useFeatureFlags } from "vue3-app-configuration";
const { getFeatureFlag } = useFeatureFlags();
const { isFeatureEnabled, featureDescription } = getFeatureFlag({
name: "your-feature-flag-name",
label: "your-feature-flag-label", // optional
});
</script>AppConfigurationClient
The AppConfigurationClient instance is exposed at this.featureFlagsManager.appConfigurationClient.