diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-24 18:06:05 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-24 18:06:05 +0000 |
commit | 2ed368929ab5094fec5da8038f723463596a80cf (patch) | |
tree | aec98d50349b0e9a490db0099253b801b2d1a9ea /doc/development/fe_guide/vue.md | |
parent | f1a5755898e865428c923587402fd965b601c4ea (diff) | |
download | gitlab-ce-2ed368929ab5094fec5da8038f723463596a80cf.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/development/fe_guide/vue.md')
-rw-r--r-- | doc/development/fe_guide/vue.md | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 396467b47d1..2c624c9085e 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -104,6 +104,51 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ })); ``` +#### Accessing feature flags + +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. The `glFeatures` object is already provided in `commons/vue.js`, so +only the mixin is required to utilize the flags: + +```javascript +// An arbitrary descendant component + +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + +export default { + // ... + mixins: [glFeatureFlagsMixin()], + // ... + created() { + if (this.glFeatures.myFlag) { + // ... + } + }, +} +``` + +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). +- 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). + ### A folder for Components This folder holds all components that are specific of this new feature. |