Skip to content

Commit a7d2147

Browse files
kazuponkazupon
authored
example: add lazy-loading (#135)
* example: add lazy-loading closes #129 * updates
1 parent 9c8c409 commit a7d2147

File tree

31 files changed

+6969
-0
lines changed

31 files changed

+6969
-0
lines changed

‎examples/lazy-loading/vite/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.local

‎examples/lazy-loading/vite/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Lazy loading exaple</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎examples/lazy-loading/vite/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "lazy-loading-vite",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build"
8+
},
9+
"dependencies": {
10+
"vue": "^3.0.0",
11+
"vue-i18n": "^9.0.0-beta.4",
12+
"vue-router": "^4.0.0-beta.13"
13+
},
14+
"devDependencies": {
15+
"@vue/compiler-sfc": "^3.0.0",
16+
"vite": "^1.0.0-rc.4"
17+
}
18+
}

‎examples/lazy-loading/vite/public/.gitkeep‎

Whitespace-only changes.

‎examples/lazy-loading/vite/src/App.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<nav>
3+
<div class="navigation">
4+
<router-link :to="{ name: 'home', params: { locale } }">
5+
{{ $t('navigations.home') }}
6+
</router-link>
7+
|
8+
<router-link :to="{ name: 'about', params: { locale } }">
9+
{{ $t('navigations.about') }}
10+
</router-link>
11+
</div>
12+
<form class="language">
13+
<label>{{ $t('labels.language') }}</label>
14+
<select v-model="locale">
15+
<option value="en">en</option>
16+
<option value="ja">ja</option>
17+
</select>
18+
</form>
19+
</nav>
20+
<router-view></router-view>
21+
</template>
22+
23+
<script>
24+
import { ref, watch, defineComponent } from 'vue'
25+
import { useRoute, useRouter } from 'vue-router'
26+
27+
export default defineComponent({
28+
name: 'App',
29+
setup() {
30+
const locale = ref('en')
31+
const router = useRouter()
32+
const route = useRoute()
33+
34+
// when change the locale, go to locale route
35+
watch(locale, val => {
36+
router.push({
37+
name: route.name,
38+
params: { locale: val }
39+
})
40+
})
41+
42+
return { locale }
43+
}
44+
})
45+
</script>
46+
47+
<style scoped>
48+
nav {
49+
display: inline-flex;
50+
}
51+
.navigation {
52+
margin-right: 1rem;
53+
}
54+
.language label {
55+
margin-right: 1rem;
56+
}
57+
</style>

‎examples/lazy-loading/vite/src/assets/.gitkeep‎

Whitespace-only changes.

‎examples/lazy-loading/vite/src/components/.gitkeep‎

Whitespace-only changes.

‎examples/lazy-loading/vite/src/i18n.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createI18n } from 'vue-i18n'
2+
import type { I18n, Locale } from 'vue-i18n'
3+
4+
import en from './locales/en'
5+
6+
export function setupI18n(locale: Locale = 'en'): I18n {
7+
const i18n = createI18n({
8+
locale,
9+
fallbackLocale: 'en',
10+
messages: {
11+
en
12+
}
13+
}) as I18n
14+
setI18nLanguage(i18n, locale)
15+
return i18n
16+
}
17+
18+
export function setI18nLanguage(i18n: I18n, locale: Locale): void {
19+
i18n.global.locale.value = locale
20+
/**
21+
* NOTE:
22+
* If you need to specify the language setting for headers, such as the `fetch` API, set it here.
23+
* The following is an example for axios.
24+
*
25+
* axios.defaults.headers.common['Accept-Language'] = locale
26+
*/
27+
document.querySelector('html').setAttribute('lang', locale)
28+
}

‎examples/lazy-loading/vite/src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#app {
2+
font-family: Avenir, Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
color: #2c3e50;
6+
}

‎examples/lazy-loading/vite/src/locales/en.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default {
2+
pages: {
3+
home: 'This page is home page',
4+
about: 'This page is about page'
5+
},
6+
navigations: {
7+
home: 'Home',
8+
about: 'About'
9+
},
10+
labels: {
11+
language: 'Languages'
12+
}
13+
}

0 commit comments

Comments
 (0)