first commit

2024-08-12 08:42:51 +07:00
parent 6deeec116e
commit 2051b6439d
82 changed files with 78274 additions and 0 deletions
--- a/pakaivue/index.html
+++ b/pakaivue/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue App with SFC Loader</title>
+  <!-- Vuetify CSS -->
+  <link href="../css/vuetify.css" rel="stylesheet">
+  <!-- Local Stylesheet for Fonts -->
+  <link rel="stylesheet" href="../css/styles.css">
+  <link href="../css/materialdesignicon.css" rel="stylesheet">
+</head>
+<body>
+  <div id="app"></div>
+
+  <!-- Vue.js -->
+  <script src="../libraries/vue3.4.36.global.prod.js"></script>
+  <!-- Vuex -->
+  <script src="../libraries/vuex.js"></script>
+  <!-- Vuetify -->
+  <script src="../libraries/vuetify3.js"></script>
+  <!-- vue-i18n -->
+  <script src="../libraries/vue-i18n.global.js"></script>
+  <!-- Axios -->
+  <script src="../libraries/axios.js"></script>
+  <!-- vue-sfc-loader -->
+  <script src="../libraries/vue3-sfc-loader.js"></script>
+  <!-- Store JS -->
+  <script type="module">
+    import store from './store/index.js';
+
+    const { loadModule } = window['vue-sfc-loader'];
+
+    const messages = {
+      en: {
+        message: {
+          login: 'Login',
+          email: 'Email',
+          password: 'Password',
+          forgotPassword: 'Forgot password?',
+          placeholderEmail: 'Enter your email',
+          placeholderPassword: 'Enter your password',
+          param1: 'Parameter 1',
+          param2: 'Parameter 2',
+          response: 'Response',
+          error: 'Error'
+        }
+      },
+      id: {
+        message: {
+          login: 'Masuk',
+          email: 'Surel',
+          password: 'Kata Sandi',
+          forgotPassword: 'Lupa kata sandi?',
+          placeholderEmail: 'Isikan email anda',
+          placeholderPassword: 'Isikan kata sandi anda',
+          param1: 'Parameter 1',
+          param2: 'Parameter 2',
+          response: 'Respons',
+          error: 'Kesalahan'
+        }
+      }
+    };
+
+    const browserLocale = navigator.language || navigator.languages[0];
+
+    const i18n = VueI18n.createI18n({
+      locale: browserLocale.startsWith('id') ? 'id' : 'en',
+      fallbackLocale: 'en',
+      messages,
+    });
+
+    const options = {
+      moduleCache: {
+        vue: Vue,
+      },
+      getFile(url) {
+        return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response));
+      },
+      addStyle(textContent) {
+        const style = Object.assign(document.createElement('style'), { textContent });
+        const ref = document.head.getElementsByTagName('style')[0] || null;
+        document.head.insertBefore(style, ref);
+      }
+    };
+
+    const app = Vue.createApp({
+      components: {
+        'component-a': Vue.defineAsyncComponent(() => loadModule('./components/ComponentA.vue', options)),
+        'component-b': Vue.defineAsyncComponent(() => loadModule('./components/ComponentB.vue', options))
+      }
+    });
+
+    const vuetify = Vuetify.createVuetify();
+
+    app.use(store);
+    app.use(vuetify);
+    app.use(i18n);
+    app.mount('#app');
+  </script>
+</body>
+</html>