Commit 02b3fbc5 authored by Mark Florian's avatar Mark Florian Committed by Andrew Fontaine

Document how to access feature flags in Vue

Originated from this [discussion][1].

[1]: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14531#note_188376382
parent 14faad74
......@@ -104,6 +104,49 @@ 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:
```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
export default {
...
inject: {
aFeatureFlag: {
from: 'aFeatureFlag',
default: false,
},
},
...
}
```
This approach has several 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.
- 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.
......
......@@ -109,6 +109,9 @@ if ( gon.features.vimBindings ) {
The name of the feature flag in JavaScript will always be camelCased, meaning
that checking for `gon.features.vim_bindings` would not work.
See the [Vue guide](../fe_guide/vue.md#accessing-feature-flags) for details about
how to access feature flags in a Vue application.
### Specs
In the test environment `Feature.enabled?` is stubbed to always respond to `true`,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment