-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add base documentation * Updated base draft * Update usage documentation and create schema-markup * Add footer links, sidebar link, update schema-markup and draft documentation * Uncomment schema markup reference * Add link to sample app and GitHub Repository * Update website/docs/sdk-reference/community/vue.md * Update website/sidebars.js Co-authored-by: adams85 <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: adams85 <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: adams85 <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: adams85 <[email protected]> * add consistent formatting * Add link to the Vue.js SDK page on the overview page * Update website/docs/sdk-reference/overview.md Co-authored-by: Gergely Sinka <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/community/vue.md Co-authored-by: Lajos Szoke <[email protected]> * Update website/docs/sdk-reference/overview.md Co-authored-by: Lajos Szoke <[email protected]> --------- Co-authored-by: adams85 <[email protected]> Co-authored-by: Gergely Sinka <[email protected]> Co-authored-by: Lajos Szoke <[email protected]>
- Loading branch information
4 people
authored
Jan 22, 2024
1 parent
1f2a2db
commit 93f8083
Showing
5 changed files
with
320 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,256 @@ | ||
| --- | ||
| id: vue | ||
| title: ConfigCat SDK for Vue.js | ||
| description: Unofficial Vue SDK for ConfigCat Feature Flags. Based on ConfigCat's JavaScript SDK. | ||
| --- | ||
|
|
||
| export const VueSchema = require('@site/src/schema-markup/sdk-reference/community/vue.json'); | ||
|
|
||
| <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(VueSchema) }}></script> | ||
|
|
||
| :::caution | ||
| As this is a community-maintained package, ConfigCat can't guarantee its stability, and safety and can't provide official customer support. | ||
| ::: | ||
|
|
||
| <a href="https://github.com/codedbychavez/configcat-vue" target="_blank">ConfigCat SDK for Vue.js on GitHub</a> | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### 1. Install the package | ||
|
|
||
| _via [npm](https://www.npmjs.com/package/configcat-vue)_ | ||
|
|
||
| ```bash | ||
| npm i configcat-vue | ||
| ``` | ||
|
|
||
| ### 2. Import and use the `ConfigCatPlugin` with your SDK Key | ||
|
|
||
| In **main.ts**: | ||
|
|
||
| ```js | ||
| import { ConfigCatPlugin } from "configcat-vue"; | ||
| ``` | ||
|
|
||
| ```js | ||
| app.use(ConfigCatPlugin, { | ||
| sdkKey: "YOUR-CONFIGCAT-SDK-KEY-GOES-HERE", // sdkKey is required | ||
| }); | ||
| ``` | ||
|
|
||
| ### 3. Get your setting value | ||
|
|
||
| This SDK includes a `FeatureWrapper` component. It enables users to control the visibility of specific parts within their Vue.js application (such as components or HTML elements) when the feature flag is enabled. | ||
|
|
||
| In any `.vue` component file: | ||
|
|
||
| ```vue | ||
| <script setup lang="ts"> | ||
| import { FeatureWrapper } from "configcat-vue"; | ||
| </script> | ||
| ``` | ||
|
|
||
| Pass the feature flag key as a prop: | ||
|
|
||
| ```js | ||
| <template> | ||
| <div class="my-app"> | ||
| <FeatureWrapper featureKey="YOUR-FEATURE-KEY-GOES-HERE"> | ||
| {/* This is displayed when the feature flag is turned on */} | ||
| <TheNewFeature /> | ||
| </FeatureWrapper> | ||
| </div> | ||
| </template> | ||
| ``` | ||
|
|
||
| Optionally, the `FeatureWrapper` component also provides an `#else` and `#loading` template. Components or HTML elements can be included within these templates that would display when the feature flag is **turned off** or **loading** respectively. | ||
|
|
||
| ```js | ||
| <FeatureWrapper | ||
| featureKey="YOUR-FEATURE-KEY-GOES-HERE" | ||
| > | ||
| <TheNewFeature /> | ||
| <template #else> | ||
| {/* Displayed when the feature flag is turned off. Add anything in this block, like HTML elements or other Vue components */} | ||
| <div class="feature-not-available-wrapper"> | ||
| <p>Sorry, this feature is not available. Your feature flag is off.</p> | ||
| </div> | ||
| </template> | ||
| <template #loading> | ||
| {/* Display while the feature flag is loading. Add anything in this block, like HTML elements or other Vue components */} | ||
| <div class="loading-wrapper"> | ||
| <p>Loading...</p> | ||
| </div> | ||
| </template> | ||
| </FeatureWrapper> | ||
| ``` | ||
|
|
||
| ## Advanced Usage | ||
|
|
||
| ### Specifying a polling mode | ||
|
|
||
| Polling modes are used to control how often ConfigCat's SDK client downloads the values of feature flags from ConfigCat's servers. The default polling mode is `AutoPoll`. Auto Polling fetches the latest feature flag values every 60 seconds by default. To change this, Specify a polling mode and set the polling interval (in seconds) via the `pollingIntervalInSeconds` property. | ||
|
|
||
| Import: | ||
|
|
||
| ```js | ||
| import { PollingMode } from "configcat-vue"; | ||
| ``` | ||
|
|
||
| Add `pollingMode` to the `ConfigCatPlugin` options and set the polling interval via the `clientOptions` property: | ||
|
|
||
| ```js | ||
| app.use(ConfigCatPlugin, { | ||
| sdkKey: "YOUR-CONFIGCAT-SDKKEY-GOES-HERE", | ||
| pollingMode: PollingMode.AutoPoll, // Optional. Default is AutoPoll | ||
| clientOptions: { | ||
| pollIntervalSeconds: 5 // Optional. Specify the polling interval in seconds. The default is 60 seconds. | ||
| } | ||
| }); | ||
|
|
||
| ``` | ||
|
|
||
| `pollingMode` can be set to: `PollingMode.AutoPoll`, `PollingMode.ManualPoll` and `PollingMode.LazyLoad` | ||
|
|
||
| > See documentation [here](/advanced/caching/). | ||
| ### Using the plugin with a logger | ||
|
|
||
| You may want to log the actions of the underlying ConfigCat SDK client. To do this, specify a logger in `clientOptions`: | ||
|
|
||
| > See documentation [here](/sdk-reference/js/#logging). | ||
| Add `createConsoleLogger`, and `LoggerLevel` to your import: | ||
|
|
||
| ```js | ||
| import { createConsoleLogger, LogLevel } from "configcat-vue"; | ||
| ``` | ||
|
|
||
| Create the logger with a specified log level: | ||
|
|
||
| > See documentation [here](/sdk-reference/js/#setting-log-levels). | ||
| Use the logger in `clientOptions`: | ||
|
|
||
| ```js | ||
| app.use(ConfigCatPlugin, { | ||
| sdkKey: "YOUR-CONFIGCAT-SDK-KEY-GOES-HERE", // // sdkKey is required | ||
| clientOptions: { // clientOptions is optional | ||
| // ... | ||
| logger: createConsoleLogger(LogLevel.Info), | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| #### Available log levels | ||
|
|
||
| | Level | Description | | ||
| | ----- | ------------------------------------------------------- | | ||
| | Off | Nothing gets logged. | | ||
| | Error | Only error level events are logged. | | ||
| | Warn | Default. Errors and Warnings are logged. | | ||
| | Info | Errors, Warnings and feature flag evaluation is logged. | | ||
| | Debug | All of the above plus debug info is logged. | | ||
|
|
||
| ### Specifying a User Object | ||
|
|
||
| The [User Object](/advanced/user-object/) stores attributes of a user in your application. It works hand in hand with ConfigCat's [Targeting](/advanced/targeting/) rules for targeting specific users with feature flags. A User Object can be passed as a prop to the `FeatureWrapper` component. | ||
|
|
||
| > See documentation [here](/advanced/user-object/). | ||
| Define the User Object: | ||
|
|
||
| ```js | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import { User } from 'configcat-vue'; | ||
|
|
||
| // Define the User Object | ||
| const user = new User('[email protected]'); | ||
| const userObject = ref<User>(user) | ||
|
|
||
| </script> | ||
| ``` | ||
|
|
||
| Pass it to the `FeatureWrapper` component: | ||
|
|
||
| ```js | ||
| <template> | ||
| <div class="my-app"> | ||
| <FeatureWrapper featureKey="YOUR-FEATURE-KEY-GOES-HERE" :userObject="userObject"> | ||
| <TheNewFeature /> | ||
|
|
||
| </FeatureWrapper> | ||
| </div> | ||
| </template> | ||
| ``` | ||
|
|
||
| ### Listening to flag changes emitted from the FeatureWrapper component | ||
|
|
||
| When a feature flag is toggled ON or OFF in the [ConfigCat dashboard](https://app.configcat.com) the `FeatureWrapper` component emits the updated feature flag value. How quickly the updated value is emitted depends on the polling interval set in the `clientOptions` property of the `ConfigCatPlugin`. | ||
|
|
||
| Listen and handle changes using `@flag-value-changed`: | ||
|
|
||
| ```js | ||
| <template> | ||
| <div class="my-app"> | ||
| <FeatureWrapper featureKey="YOUR-FEATURE-KEY-GOES-HERE" @flag-value-changed="handleFlagValueChange"> | ||
| <TheNewFeature /> | ||
|
|
||
| </FeatureWrapper> | ||
| </div> | ||
| </template> | ||
| ``` | ||
|
|
||
| ```js | ||
| <script setup lang="ts"> | ||
| {/* Handle to the flag value changes */} | ||
| const handleFlagValueChange = (flagValue: boolean) => { | ||
| console.log('Flag value changed to: ', flagValue); | ||
| } | ||
|
|
||
| </script> | ||
| ``` | ||
|
|
||
| ### Using the underlying ConfigCat client | ||
|
|
||
| This plugin exposes (provides) the underlying ConfigCat client. By injecting the provided client instance, you can use all the features it offers. | ||
|
|
||
| > See documentation [here](/sdk-reference/js). | ||
| One of the ways it can be used is by subscribing to events emitted by the ConfigCat client. | ||
|
|
||
| Inject the ConfigCat client into your component: | ||
|
|
||
| ```js | ||
| <script setup lang="ts"> | ||
| import { inject, onBeforeMount } from 'vue'; | ||
| import { FeatureWrapper } from "configcat-vue"; | ||
| // ... | ||
|
|
||
| // Import the ConfigCat client interface | ||
| import type { IConfigCatClient } from 'configcat-vue'; | ||
|
|
||
| // Inject the ConfigCat client | ||
| const configCatClient = inject<IConfigCatClient>('configCatClient'); | ||
|
|
||
| onBeforeMount(() => { | ||
| // Subscribe to the events using the .on method of the ConfigCat SDK client | ||
| configCatClient?.on('flagEvaluated', () => { | ||
| console.log('Flag evaluated'); | ||
| }); | ||
| }); | ||
|
|
||
| </script> | ||
| ``` | ||
| ## Sample Application | ||
| - <a href="https://github.com/codedbychavez/configcat-vue-sample" target="_blank">Sample Vue.js App</a> | ||
| ## Look under the hood | ||
| - <a href="https://github.com/codedbychavez/configcat-vue" target="_blank">ConfigCat Vue.js SDK on GitHub</a> | ||
| - <a href="https://www.npmjs.com/package/configcat-vue" target="_blank">ConfigCat Vue.js SDK on NPM</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
website/src/schema-markup/sdk-reference/community/vue.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| { | ||
| "@context": "https://schema.org/", | ||
| "@type": "HowTo", | ||
| "name": "How to use feature flags in Vue.js?", | ||
| "description": "How to use feature flags in Vue.js using ConfigCat Feature Flags.", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "totalTime": "PT10M", | ||
| "estimatedCost": { | ||
| "@type": "MonetaryAmount", | ||
| "currency": "USD", | ||
| "value": "0" | ||
| }, | ||
| "supply": { | ||
| "@type": "HowToSupply", | ||
| "name": "ConfigCat", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "url": "https://configcat.com" | ||
| }, | ||
| "tool": { | ||
| "@type": "HowToTool", | ||
| "name": "ConfigCat Feature Flags - https://configcat.com" | ||
| }, | ||
| "step": [ | ||
| { | ||
| "@type": "HowToStep", | ||
| "text": "Sign up for a free ConfigCat account", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "name": "Registration", | ||
| "url": "https://app.configcat.com/auth/signup" | ||
| }, | ||
| { | ||
| "@type": "HowToStep", | ||
| "text": "Install the package", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "name": "Installation", | ||
| "url": "https://configcat.com/docs/sdk-reference/community/vue/#1-install-the-package" | ||
| }, | ||
| { | ||
| "@type": "HowToStep", | ||
| "text": "Import and use the plugin", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "name": "Import and use", | ||
| "url": "https://configcat.com/docs/sdk-reference/community/vue/#2-import-and-use-the-configcatplugin-with-your-sdk-key" | ||
| }, | ||
| { | ||
| "@type": "HowToStep", | ||
| "text": "Get your setting value", | ||
| "image": "https://configcat.com/images/shared/home.png", | ||
| "name": "Evaluation", | ||
| "url": "https://configcat.com/docs/sdk-reference/community/vue/#3-get-your-setting-value" | ||
| } | ||
| ] | ||
| } |