Use vue files for vue components.

Remove from globalnamespace

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,
@@ -162,78 +163,91 @@ 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>
+        </li>
+        <li :class="{ 'active' : scope === 'stopped' }">
+          <a :href="projectStoppedEnvironmentsPath">
+            Stopped
+            <span class="badge js-stopped-environments-count">
+              {{state.stoppedCounter}}
+            </span>
           </a>
-        </div>
+        </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="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
+      <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>
-        </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"
-            :toggleDeployBoard="toggleDeployBoard"
-            :store="store"
-            :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>
+        </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"
+          :toggleDeployBoard="toggleDeployBoard"
+          :store="store"
+          :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

-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', () => {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#environments-list-view',
+    components: {
+      'environments-table-app': EnvironmentsComponent,
+    },
+    render: createElement => createElement('environments-table-app'),
   });
 });

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', () => {
@@ -31,9 +34,10 @@ describe('Environment', () => {
       });
 
       it('should render the empty state', (done) => {
+        console.log(EnvironmentsComponent);
         component = new EnvironmentsComponent({
           el: document.querySelector('#environments-list-view'),
-        });
+        }).$mount();
 
         setTimeout(() => {
           expect(