Update Vue Documentation to Use Plugin/Mixinimplement-feature-flags-plugin

This updates our documentation to ensure people are aware of the now
existing `GlFeatureFlagsPlugin` and `glFeatureFlagsMixin` to easily
provide and inject the feature flags object into a child component.

3 files changed, 28 insertions, 23 deletions

diff --git a/app/assets/javascripts/commons/vue.js b/app/assets/javascripts/commons/vue.js
index 798623b94fb..b4411aa3589 100644
--- a/app/assets/javascripts/commons/vue.js
+++ b/app/assets/javascripts/commons/vue.js
@@ -1,6 +1,9 @@
 import Vue from 'vue';
 import '../vue_shared/vue_resource_interceptor';
+import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
+
+Vue.use(GlFeatureFlagsPlugin);
diff --git a/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js b/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
index 11d10988623..3488a44bd0f 100644
--- a/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
+++ b/app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js
@@ -1,7 +1,7 @@
 export default Vue => {
   Vue.mixin({
     provide: {
-      glFeatures: { ...(window.gon.features || {}) },
+      glFeatures: { ...((window.gon && window.gon.features) || {}) },
     },
   });
 };
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).