summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
Diffstat (limited to 'doc')
-rw-r--r--doc/development/fe_guide/vue.md46
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).