diff --git a/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js b/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
index 73eaaf6aa72..6aa10531034 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
@@ -5,7 +5,7 @@ export default {
       required: true,
     },
 
-    hasCIEnabled: {
+    hasCiEnabled: {
       type: Boolean,
       required: true,
     },
@@ -36,7 +36,7 @@ export default {
       </a>
 
       <a
-        v-if="!hasCIEnabled"
+        v-if="!hasCiEnabled"
         :href="helpPagePath"
         class="btn btn-info">
         Get started with Pipelines
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index b6721600415..48f0e9036e8 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -106,7 +106,7 @@ export default {
         this.state.pageInfo.total > this.state.pageInfo.perPage;
     },
 
-    hasCIEnabled() {
+    hasCiEnabled() {
       return this.hasCi !== undefined;
     },
 
@@ -190,11 +190,11 @@ export default {
           :paths="paths" />
 
         <navigation-controls
-          :newPipelinePath="newPipelinePath"
-          :hasCIEnabled="hasCIEnabled"
-          :helpPagePath="helpPagePath"
+          :new-pipeline-path="newPipelinePath"
+          :has-ci-enabled="hasCiEnabled"
+          :help-page-path="helpPagePath"
           :ciLintPath="ciLintPath"
-          :canCreatePipeline="canCreatePipelineParsed " />
+          :can-create-pipeline="canCreatePipelineParsed " />
       </div>
 
       <div class="content-list pipelines">
diff --git a/spec/javascripts/vue_pipelines_index/nav_controls_spec.js b/spec/javascripts/vue_pipelines_index/nav_controls_spec.js
index 8283e53c8b1..659c4854a56 100644
--- a/spec/javascripts/vue_pipelines_index/nav_controls_spec.js
+++ b/spec/javascripts/vue_pipelines_index/nav_controls_spec.js
@@ -11,7 +11,7 @@ describe('Pipelines Nav Controls', () => {
   it('should render link to create a new pipeline', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCIEnabled: true,
+      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       canCreatePipeline: true,
@@ -28,7 +28,7 @@ describe('Pipelines Nav Controls', () => {
   it('should not render link to create pipeline if no permission is provided', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCIEnabled: true,
+      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       canCreatePipeline: false,
@@ -44,7 +44,7 @@ describe('Pipelines Nav Controls', () => {
   it('should render link for CI lint', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCIEnabled: true,
+      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       canCreatePipeline: true,
@@ -61,7 +61,7 @@ describe('Pipelines Nav Controls', () => {
   it('should render link to help page when CI is not enabled', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCIEnabled: false,
+      hasCiEnabled: false,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       canCreatePipeline: true,
@@ -78,7 +78,7 @@ describe('Pipelines Nav Controls', () => {
   it('should not render link to help page when CI is enabled', () => {
     const mockData = {
       newPipelinePath: 'foo',
-      hasCIEnabled: true,
+      hasCiEnabled: true,
       helpPagePath: 'foo',
       ciLintPath: 'foo',
       canCreatePipeline: true,