diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
deleted file mode 100644
index d79b916c3604f2b22d4db84daefc28144ee68f3a..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Renders the external url link in environments table.
- */
-export default {
- props: {
- externalUrl: {
- type: String,
- default: '',
- },
- },
-
- computed: {
- title() {
- return 'Open';
- },
- },
-
- template: `
-
-
-
- `,
-};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eaeec2bc53c60f043b193f15853345fa159a8fbe
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index d9b49287dec986a8c923e59aa9fa03d42cb7c535..915f0ca4ccb389932c27a39b82a0b08cbeb9219c 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -1,10 +1,10 @@
import Timeago from 'timeago.js';
import '../../lib/utils/text_utility';
import ActionsComponent from './environment_actions';
-import ExternalUrlComponent from './environment_external_url';
-import StopComponent from './environment_stop';
+import ExternalUrlComponent from './environment_external_url.vue';
+import StopComponent from './environment_stop.vue';
import RollbackComponent from './environment_rollback';
-import TerminalButtonComponent from './environment_terminal_button';
+import TerminalButtonComponent from './environment_terminal_button.vue';
import MonitoringButtonComponent from './environment_monitoring';
import CommitComponent from '../../vue_shared/components/commit';
import eventHub from '../event_hub';
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.vue
similarity index 70%
rename from app/assets/javascripts/environments/components/environment_stop.js
rename to app/assets/javascripts/environments/components/environment_stop.vue
index 9e5465c17857959292805d5cac6aae11b623090d..11e9aff7b925fee0f0595c4429932bc974ab24d2 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -1,3 +1,4 @@
+
+
+
+
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.vue
similarity index 64%
rename from app/assets/javascripts/environments/components/environment_terminal_button.js
rename to app/assets/javascripts/environments/components/environment_terminal_button.vue
index 092a50a0d6f9ba16b44edf27dc2e6ee6cac1f4e0..c8c1f17d4d867737a72a2c9ebaf1fa011a684d0c 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -1,3 +1,4 @@
+
+
+
+
+
diff --git a/spec/javascripts/environments/environment_external_url_spec.js b/spec/javascripts/environments/environment_external_url_spec.js
index 9af218a27fff1691b1a38755622361b6168da848..056d68a26e93661bc585dea725ae57d83872816d 100644
--- a/spec/javascripts/environments/environment_external_url_spec.js
+++ b/spec/javascripts/environments/environment_external_url_spec.js
@@ -1,5 +1,5 @@
import Vue from 'vue';
-import externalUrlComp from '~/environments/components/environment_external_url';
+import externalUrlComp from '~/environments/components/environment_external_url.vue';
describe('External URL Component', () => {
let ExternalUrlComponent;
diff --git a/spec/javascripts/environments/environment_stop_spec.js b/spec/javascripts/environments/environment_stop_spec.js
index 01055e3f255110a6e8bb4d20c665e2a79fccba5d..942e4aaabd4e18acf914a8953ad2d550a45787fb 100644
--- a/spec/javascripts/environments/environment_stop_spec.js
+++ b/spec/javascripts/environments/environment_stop_spec.js
@@ -1,5 +1,5 @@
import Vue from 'vue';
-import stopComp from '~/environments/components/environment_stop';
+import stopComp from '~/environments/components/environment_stop.vue';
describe('Stop Component', () => {
let StopComponent;
diff --git a/spec/javascripts/environments/environment_terminal_button_spec.js b/spec/javascripts/environments/environment_terminal_button_spec.js
index be2289edc2b593b64ade367a988d8b00f3bda5c5..858472af4b615dbcddda82a94acd31ae59d49b8a 100644
--- a/spec/javascripts/environments/environment_terminal_button_spec.js
+++ b/spec/javascripts/environments/environment_terminal_button_spec.js
@@ -1,5 +1,5 @@
import Vue from 'vue';
-import terminalComp from '~/environments/components/environment_terminal_button';
+import terminalComp from '~/environments/components/environment_terminal_button.vue';
describe('Stop Component', () => {
let TerminalComponent;