4 files changed, 67 insertions, 1 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 115330c3..5eeeb93b 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -34,6 +34,7 @@ export default {
 </script>
 
 <template>
+  <div class="app-inner">
     <div id="fc_bg__container" />
 
     <el-menu
@@ -56,6 +57,7 @@ export default {
         <el-button color="white" icon="SemiSelect" @click="minimize" circle />
         <el-button color="white" icon="CloseBold" @click="close" circle />
     </div>
+  </div>
 </template>
 
 <style>
@@ -63,6 +65,10 @@ export default {
 #fc__menu_bar {
     border: none !important;
 }
+.app-inner {
+  height: 100%;
+  width: 100%;
+}
 
 /* Header item */
 #fc__menu_bar .el-menu-item {
@@ -84,6 +90,11 @@ export default {
   background-color: transparent;
 }
 
+.app-inner > .fc__mods__container {
+  overflow-y: auto;
+  height: calc(100% - var(--fc-menu_height));
+}
+
 /* Header menu */
 #fc__menu_bar {
   background-image: radial-gradient(transparent 1px);
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index 6fd4a793..6e00975d 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -1,3 +1,12 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
 body {
   margin: 0;
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
@@ -5,6 +14,12 @@ body {
   user-select: none;
 }
 
+#app {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
 #fc_bg__container {
   background: url(/src/assets/wallpaperflare.com_wallpaper.jpg) center no-repeat;
   background-size: cover;
diff --git a/src-vue/src/utils/NorthstarMod.d.ts b/src-vue/src/utils/NorthstarMod.d.ts
new file mode 100644
index 00000000..b0ce0ed3
--- /dev/null
+++ b/src-vue/src/utils/NorthstarMod.d.ts
@@ -0,0 +1,5 @@
+// Matches Rust struct (in lib.rs).
+export interface NorthstarMod {
+    name: String,
+    enabled: bool,
+}
diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index c37f5fe2..934d6b9d 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -1,15 +1,50 @@
 <template>
     <div class="fc__mods__container">
         <h3>Installed Mods:</h3>
-        TODO
+        <div>
+            <el-card shadow="hover" v-for="mod in installed_mods">
+                <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
+                    disabled />
+                {{mod.name}}
+            </el-card>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { ElNotification } from "element-plus";
+import { invoke } from '@tauri-apps/api/tauri';
+import { GameInstall } from "../utils/GameInstall";
+import { NorthstarMod } from "../utils/NorthstarMod"
 
 export default defineComponent({
     name: "ModsView",
+    data() {
+        return {
+            installed_mods: [] as NorthstarMod[],
+        }
+    },
+    async mounted() {
+        let game_install = {
+            game_path: this.$store.state.game_path,
+            install_type: this.$store.state.install_type
+        } as GameInstall;
+        // Call back-end for installed mods
+        await invoke("get_installed_mods_caller", { gameInstall: game_install })
+            .then((message) => {
+                this.installed_mods = (message as NorthstarMod[]);
+            })
+            .catch((error) => {
+                console.error(error);
+                ElNotification({
+                    title: 'Error',
+                    message: error,
+                    type: 'error',
+                    position: 'bottom-right'
+                });
+            });
+    }
 });
 </script>