103 lines
2.9 KiB
HTML
103 lines
2.9 KiB
HTML
<!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>
|