Use vue files for vue components.

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

@@ -1,6 +1,7 @@
+<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,76 +141,90 @@ export default Vue.component('environment-component', {
         });
     },
   },
-
-  template: `
-    <div :class="cssContainerClass">
-      <div class="top-area">
-        <ul v-if="!isLoading" class="nav-links">
-          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
-            <a :href="projectEnvironmentsPath">
-              Available
-              <span class="badge js-available-environments-count">
-                {{state.availableCounter}}
-              </span>
-            </a>
-          </li>
-          <li v-bind:class="{ 'active' : scope === 'stopped' }">
-            <a :href="projectStoppedEnvironmentsPath">
-              Stopped
-              <span class="badge js-stopped-environments-count">
-                {{state.stoppedCounter}}
-              </span>
-            </a>
-          </li>
-        </ul>
-        <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
-          <a :href="newEnvironmentPath" class="btn btn-create">
-            New environment
+};
+</script>
+<template>
+  <div :class="cssContainerClass">
+    <div class="top-area">
+      <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">
+              {{state.availableCounter}}
+            </span>
           </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>
-
-        <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.
-          </h2>
-          <p class="blank-state-text">
-            Environments are places where code gets deployed, such as staging or production.
-            <br />
-            <a :href="helpPagePath">
-              Read more about environments
-            </a>
-          </p>
-
-          <a v-if="canCreateEnvironmentParsed"
-            :href="newEnvironmentPath"
-            class="btn btn-create js-new-environment-button">
-            New Environment
+        </li>
+        <li :class="{ active : scope === 'stopped' }">
+          <a :href="projectStoppedEnvironmentsPath">
+            Stopped
+            <span class="badge js-stopped-environments-count">
+              {{state.stoppedCounter}}
+            </span>
           </a>
-        </div>
-
-        <div class="table-holder"
-          v-if="!isLoading && state.environments.length > 0">
-
-          <environment-table
-            :environments="state.environments"
-            :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :service="service"
-            :is-loading-folder-content="isLoadingFolderContent" />
-        </div>
-
-        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
-          :change="changePage"
-          :pageInfo="state.paginationInformation">
-        </table-pagination>
+        </li>
+      </ul>
+      <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" />
+      </div>
+
+      <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.
+        </h2>
+        <p class="blank-state-text">
+          Environments are places where code gets deployed, such as staging or production.
+          <br />
+          <a :href="helpPagePath">
+            Read more about environments
+          </a>
+        </p>
+
+        <a
+          v-if="canCreateEnvironmentParsed"
+          :href="newEnvironmentPath"
+          class="btn btn-create js-new-environment-button">
+          New Environment
+        </a>
+      </div>
+
+      <div
+        class="table-holder"
+        v-if="!isLoading && state.environments.length > 0">
+
+        <environment-table
+          :environments="state.environments"
+          :can-create-deployment="canCreateDeploymentParsed"
+          :can-read-environment="canReadEnvironmentParsed"
+          :service="service"
+          :is-loading-folder-content="isLoadingFolderContent" />
+      </div>
+
+      <table-pagination
+        v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+        :change="changePage"
+        :pageInfo="state.paginationInformation" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/environments/environments_bundle.js

@@ -1,13 +1,10 @@
-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

@@ -1,13 +1,10 @@
-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.vue

@@ -1,6 +1,6 @@
+<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,54 +116,66 @@ export default Vue.component('environment-folder-view', {
       return param;
     },
   },
+};
+</script>
+<template>
+  <div :class="cssContainerClass">
+    <div
+      class="top-area"
+      v-if="!isLoading">
 
-  template: `
-    <div :class="cssContainerClass">
-      <div class="top-area" v-if="!isLoading">
+      <h4 class="js-folder-name environments-folder-name">
+        Environments / <b>{{folderName}}</b>
+      </h4>
 
-        <h4 class="js-folder-name environments-folder-name">
-          Environments / <b>{{folderName}}</b>
-        </h4>
+      <ul class="nav-links">
+        <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 :class="{ active : scope === 'stopped' }">
+          <a
+            :href="stoppedPath"
+            class="js-stopped-environments-folder-tab">
+            Stopped
+            <span class="badge js-stopped-environments-count">
+              {{state.stoppedCounter}}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
 
-        <ul class="nav-links">
-          <li v-bind: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">
-              Stopped
-              <span class="badge js-stopped-environments-count">
-                {{state.stoppedCounter}}
-              </span>
-            </a>
-          </li>
-        </ul>
+    <div class="environments-container">
+      <div
+        class="environments-list-loading text-center"
+        v-if="isLoading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true"/>
       </div>
 
-      <div class="environments-container">
-        <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
+      <div
+        class="table-holder"
+        v-if="!isLoading && state.environments.length > 0">
 
-        <div class="table-holder"
-          v-if="!isLoading && state.environments.length > 0">
+        <environment-table
+          :environments="state.environments"
+          :can-create-deployment="canCreateDeploymentParsed"
+          :can-read-environment="canReadEnvironmentParsed"
+          :service="service"/>
 
-          <environment-table
-            :environments="state.environments"
-            :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"
-            :service="service"/>
-
-          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
-            :change="changePage"
-            :pageInfo="state.paginationInformation"/>
-        </div>
+        <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

@@ -1,15 +1,18 @@
 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

@@ -1,13 +1,15 @@
 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');
   });