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,12 +163,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">
@@ -175,7 +179,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">
@@ -184,19 +188,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.
@@ -209,14 +223,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
@@ -231,9 +247,7 @@ export default Vue.component('environment-component', {
 
       <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', () => {
+  // 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(