Use vue files for vue components.

app/assets/javascripts/environments/components/environment.js → app/assets/javascripts/environments/components/environment.vue

+<script>
+
 /* eslint-disable no-new */
 /* global Flash */
-import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
 import EnvironmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
@@ -8,7 +9,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
 import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
 
-export default Vue.component('environment-component', {
+export default {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -140,12 +141,15 @@ export default Vue.component('environment-component', {
         });
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <div :class="cssContainerClass">
     <div class="top-area">
-        <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+      <ul
+        v-if="!isLoading"
+        class="nav-links">
+        <li :class="{ active: scope === null || scope === 'available' }">
           <a :href="projectEnvironmentsPath">
             Available
             <span class="badge js-available-environments-count">
@@ -153,7 +157,7 @@ export default Vue.component('environment-component', {
             </span>
           </a>
         </li>
-          <li v-bind:class="{ 'active' : scope === 'stopped' }">
+        <li :class="{ active : scope === 'stopped' }">
           <a :href="projectStoppedEnvironmentsPath">
             Stopped
             <span class="badge js-stopped-environments-count">
@@ -162,19 +166,29 @@ export default Vue.component('environment-component', {
           </a>
         </li>
       </ul>
-        <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
-          <a :href="newEnvironmentPath" class="btn btn-create">
+      <div
+        v-if="canCreateEnvironmentParsed && !isLoading"
+        class="nav-controls">
+        <a
+          :href="newEnvironmentPath"
+          class="btn btn-create">
           New environment
         </a>
       </div>
     </div>
 
     <div class="content-list environments-container">
-        <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+      <div
+          class="environments-list-loading text-center"
+          v-if="isLoading">
+
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
       </div>
 
-        <div class="blank-state blank-state-no-icon"
+      <div
+        class="blank-state blank-state-no-icon"
         v-if="!isLoading && state.environments.length === 0">
         <h2 class="blank-state-title js-blank-state-title">
           You don't have any environments right now.
@@ -187,14 +201,16 @@ export default Vue.component('environment-component', {
           </a>
         </p>
 
-          <a v-if="canCreateEnvironmentParsed"
+        <a
+          v-if="canCreateEnvironmentParsed"
           :href="newEnvironmentPath"
           class="btn btn-create js-new-environment-button">
           New Environment
         </a>
       </div>
 
-        <div class="table-holder"
+      <div
+        class="table-holder"
         v-if="!isLoading && state.environments.length > 0">
 
         <environment-table
@@ -205,11 +221,10 @@ export default Vue.component('environment-component', {
           :is-loading-folder-content="isLoadingFolderContent" />
       </div>
 
-        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+      <table-pagination
+        v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
         :change="changePage"
-          :pageInfo="state.paginationInformation">
-        </table-pagination>
+        :pageInfo="state.paginationInformation" />
     </div>
   </div>
-  `,
-});
+</template>

app/assets/javascripts/environments/environments_bundle.js

-import EnvironmentsComponent from './components/environment';
+import Vue from 'vue';
+import EnvironmentsComponent from './components/environment.vue';
 
-$(() => {
-  window.gl = window.gl || {};
-
-  if (gl.EnvironmentsListApp) {
-    gl.EnvironmentsListApp.$destroy(true);
-  }
-
-  gl.EnvironmentsListApp = new EnvironmentsComponent({
-    el: document.querySelector('#environments-list-view'),
-  });
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#environments-list-view',
+  components: {
+    'environments-table-app': EnvironmentsComponent,
+  },
+  render: createElement => createElement('environments-table-app'),
+}));

app/assets/javascripts/environments/folder/environments_folder_bundle.js

-import EnvironmentsFolderComponent from './environments_folder_view';
+import Vue from 'vue';
+import EnvironmentsFolderComponent from './environments_folder_view.vue';
 
-$(() => {
-  window.gl = window.gl || {};
-
-  if (gl.EnvironmentsListFolderApp) {
-    gl.EnvironmentsListFolderApp.$destroy(true);
-  }
-
-  gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
-    el: document.querySelector('#environments-folder-list-view'),
-  });
-});
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#environments-folder-list-view',
+  components: {
+    'environments-folder-app': EnvironmentsFolderComponent,
+  },
+  render: createElement => createElement('environments-folder-app'),
+}));

app/assets/javascripts/environments/folder/environments_folder_view.js → app/assets/javascripts/environments/folder/environments_folder_view.vue

+<script>
 /* eslint-disable no-new */
 /* global Flash */
-import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
 import EnvironmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
@@ -8,7 +8,7 @@ import TablePaginationComponent from '../../vue_shared/components/table_paginati
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 
-export default Vue.component('environment-folder-view', {
+export default {
   components: {
     'environment-table': EnvironmentTable,
     'table-pagination': TablePaginationComponent,
@@ -116,26 +116,33 @@ export default Vue.component('environment-folder-view', {
       return param;
     },
   },
-
-  template: `
+};
+</script>
+<template>
   <div :class="cssContainerClass">
-      <div class="top-area" v-if="!isLoading">
+    <div
+      class="top-area"
+      v-if="!isLoading">
 
       <h4 class="js-folder-name environments-folder-name">
         Environments / <b>{{folderName}}</b>
       </h4>
 
       <ul class="nav-links">
-          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
-            <a :href="availablePath" class="js-available-environments-folder-tab">
+        <li :class="{ active: scope === null || scope === 'available' }">
+          <a
+            :href="availablePath"
+            class="js-available-environments-folder-tab">
             Available
             <span class="badge js-available-environments-count">
               {{state.availableCounter}}
             </span>
           </a>
         </li>
-          <li v-bind:class="{ 'active' : scope === 'stopped' }">
-            <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
+        <li :class="{ active : scope === 'stopped' }">
+          <a
+            :href="stoppedPath"
+            class="js-stopped-environments-folder-tab">
             Stopped
             <span class="badge js-stopped-environments-count">
               {{state.stoppedCounter}}
@@ -146,11 +153,16 @@ export default Vue.component('environment-folder-view', {
     </div>
 
     <div class="environments-container">
-        <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
+      <div
+        class="environments-list-loading text-center"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true"/>
       </div>
 
-        <div class="table-holder"
+      <div
+        class="table-holder"
         v-if="!isLoading && state.environments.length > 0">
 
         <environment-table
@@ -159,11 +171,11 @@ export default Vue.component('environment-folder-view', {
           :can-read-environment="canReadEnvironmentParsed"
           :service="service"/>
 
-          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+        <table-pagination
+          v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
           :change="changePage"
           :pageInfo="state.paginationInformation"/>
       </div>
     </div>
   </div>
-  `,
-});
+</template>

spec/javascripts/environments/environment_spec.js

 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsComponent from '~/environments/components/environment';
+import environmentsComponent from '~/environments/components/environment.vue';
 import { environment, folder } from './mock_data';
 
 describe('Environment', () => {
   preloadFixtures('static/environments/environments.html.raw');
 
+  let EnvironmentsComponent;
   let component;
 
   beforeEach(() => {
     loadFixtures('static/environments/environments.html.raw');
+
+    EnvironmentsComponent = Vue.extend(environmentsComponent);
   });
 
   describe('successfull request', () => {

spec/javascripts/environments/folder/environments_folder_view_spec.js

 import Vue from 'vue';
 import '~/flash';
-import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view';
+import environmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
   preloadFixtures('static/environments/environments_folder_view.html.raw');
+  let EnvironmentsFolderViewComponent;
 
   beforeEach(() => {
     loadFixtures('static/environments/environments_folder_view.html.raw');
+    EnvironmentsFolderViewComponent = Vue.extend(environmentsFolderViewComponent);
     window.history.pushState({}, null, 'environments/folders/build');
   });