diff options
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/fe_guide/vue.md | 46 |
1 files changed, 24 insertions, 22 deletions
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 7d2f43ce1fa..eabf99ccb39 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -108,42 +108,44 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ Use Vue's [provide/inject](https://vuejs.org/v2/api/#provide-inject) mechanism to make feature flags available to any descendant components in a Vue -application: +application. The `glFeatures` object is already provided in `commons/vue.js`, so +only the mixin is required to utilize the flags: ```javascript -// application entry point -document.addEventListener('DOMContentLoaded', () => new Vue({ - el: '.js-vue-app', - provide: { - aFeatureFlag: gon.features.aFeatureFlag, - }, - render(createElement) { - return createElement('my-component'); - }, -})); - // An arbitrary descendant component + +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + export default { - ... - inject: { - aFeatureFlag: { - from: 'aFeatureFlag', - default: false, - }, + // ... + mixins: [glFeatureFlagsMixin()], + // ... + created() { + if (this.glFeatures.myFlag) { + // ... + } }, - ... } ``` -This approach has several benefits: +This approach has a few benefits: - Arbitrarily deeply nested components can opt-in and access the flag without intermediate components being aware of it (c.f. passing the flag down via props). -- Components can use a different local name for the flag if necessary. -- A default value can be declared in case the flag is not provided. - Good testability, since the flag can be provided to `mount`/`shallowMount` from `vue-test-utils` as easily as a prop. + + ```javascript + import { shallowMount } from '@vue/test-utils'; + + shallowMount(component, { + provide: { + glFeatures: { myFlag: true }, + }, + }); + ``` + - No need to access a global variable, except in the application's [entry point](#accessing-the-gl-object). |
