8 files changed, 110 insertions, 0 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 7d7cd27b..f00eee96 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -17,6 +17,8 @@ export default {
     return {}
   },
   mounted: async function() {
+
+    // Initialize interface language
   },
   methods: {
     close() {
@@ -32,6 +34,9 @@ export default {
   <div class="app-inner">
     <div id="fc_bg__container" :style="bgStyle"/>
 
+    <nav id="fc_menu-bar"><!-- Hide menu bar in repair view -->
+      <!-- Navigation items -->
+    </nav>
     <div class="row">
     </div>
     <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index c586a747..e50189a9 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -1,5 +1,15 @@
 import { createApp } from 'vue'
+import { createI18n } from "vue-i18n";
 import App from './App.vue'
+import ElementPlus from "element-plus";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import PlayView from "./views/PlayView.vue";
+import ChangelogView from "./views/ChangelogView.vue";
+import ModsView from "./views/ModsView.vue";
+import SettingsView from "./views/SettingsView.vue";
+import DeveloperView from "./views/DeveloperView.vue";
+import RepairView from "./views/RepairView.vue";
+import {createRouter, createWebHashHistory} from "vue-router";
 import en from "./i18n/lang/en.json";
 import fr from "./i18n/lang/fr.json";
 import da from "./i18n/lang/da.json";
@@ -13,6 +23,43 @@ import zh_Hans from "./i18n/lang/zh_Hans.json";
 
 const app = createApp(App);
 
+// internationalization
+export const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+        en, fr, da, de, es, pl, ru, it, zh_Hans
+    }
+});
+app.use(i18n);
+
+// styles
+import 'element-plus/theme-chalk/index.css';
+import './style.css'
+
+app.use(ElementPlus);
+
+// icons
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+// style
+
+// routes
+const routes = [
+    { path: '/', name: 'Main', component: async () => PlayView},
+    { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+    { path: '/mods', name: 'Mods', component: async () => ModsView},
+    { path: '/settings', name: 'Settings', component: async () => SettingsView},
+    { path: '/dev', name: 'Dev', component: async () => DeveloperView},
+    { path: '/repair', name: 'Repair', component: async () => RepairView},
+];
+export const router = createRouter({
+    history: createWebHashHistory(),
+    routes, // short for `routes: routes`
+});
+app.use(router);
 
 
 app.mount('#app')
diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
new file mode 100644
index 00000000..1c525a32
--- /dev/null
+++ b/src-vue/src/views/ChangelogView.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="fc-container">
+    </div>
+</template>
+
+<script lang="ts">
+</script>
+
+<style>
+</style>
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
new file mode 100644
index 00000000..3a187b18
--- /dev/null
+++ b/src-vue/src/views/DeveloperView.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="fc-container">
+    </div>
+</template>
+
+<script lang="ts">
+</script>
+
+<style scoped>
+</style>
diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
new file mode 100644
index 00000000..70e4247f
--- /dev/null
+++ b/src-vue/src/views/ModsView.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="fc-container" style="display: flex">
+    </div>
+</template>
+
+<script lang="ts">
+</script>
+
+<style scoped>
+</style>
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
new file mode 100644
index 00000000..1f58c803
--- /dev/null
+++ b/src-vue/src/views/PlayView.vue
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+<template>
+    <div class="fc_launch__container">
+    </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
new file mode 100644
index 00000000..3a187b18
--- /dev/null
+++ b/src-vue/src/views/RepairView.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="fc-container">
+    </div>
+</template>
+
+<script lang="ts">
+</script>
+
+<style scoped>
+</style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
new file mode 100644
index 00000000..3b0879d3
--- /dev/null
+++ b/src-vue/src/views/SettingsView.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script lang="ts">
+</script>
+
+<style scoped>
+</style>