summaryrefslogtreecommitdiff
path: root/doc/development/experiment_guide/gitlab_experiment.md
diff options
context:
space:
mode:
Diffstat (limited to 'doc/development/experiment_guide/gitlab_experiment.md')
-rw-r--r--doc/development/experiment_guide/gitlab_experiment.md14
1 files changed, 7 insertions, 7 deletions
diff --git a/doc/development/experiment_guide/gitlab_experiment.md b/doc/development/experiment_guide/gitlab_experiment.md
index 4b93105ea50..db9bc521cfd 100644
--- a/doc/development/experiment_guide/gitlab_experiment.md
+++ b/doc/development/experiment_guide/gitlab_experiment.md
@@ -503,7 +503,7 @@ so you can use it when resolving some concepts around experimentation in the cli
### Use experiments in Vue
-With the `experiment` component, you can define slots that match the name of the
+With the `gitlab-experiment` component, you can define slots that match the name of the
variants pushed to `window.gon.experiment`. For example, if we alter the `pill_color`
experiment to just use the default variants of `control` and `candidate` like so:
@@ -520,15 +520,15 @@ We can make use of the named slots `control` and `candidate` in the Vue componen
```vue
<script>
-import Experiment from '~/experimentation/components/experiment.vue';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
export default {
- components: { Experiment }
+ components: { GitlabExperiment }
}
</script>
<template>
- <experiment name="pill_color">
+ <gitlab-experiment name="pill_color">
<template #control>
<button class="bg-default">Click default button</button>
</template>
@@ -536,7 +536,7 @@ export default {
<template #candidate>
<button class="bg-red">Click red button</button>
</template>
- </experiment>
+ </gitlab-experiment>
</template>
```
@@ -545,7 +545,7 @@ For example, the Vue component for the previously-defined `pill_color` experimen
```vue
<template>
- <experiment name="pill_color">
+ <gitlab-experiment name="pill_color">
<template #control>
<button class="bg-default">Click default button</button>
</template>
@@ -557,7 +557,7 @@ For example, the Vue component for the previously-defined `pill_color` experimen
<template #blue>
<button class="bg-blue">Click blue button</button>
</template>
- </experiment>
+ </gitlab-experiment>
</template>
```