forked from kazupon/vue-i18n
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstarted.html
102 lines (95 loc) · 29.4 KB
/
started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Getting started | Vue I18n</title>
<meta name="description" content="Vue I18n is internationalization plugin for Vue.js">
<meta name="theme-color" content="#3eaf7c">
<link rel="preload" href="/vue-i18n/assets/css/0.styles.c299b601.css" as="style"><link rel="preload" href="/vue-i18n/assets/js/app.5b04e7b0.js" as="script"><link rel="preload" href="/vue-i18n/assets/js/45.550cbef0.js" as="script"><link rel="prefetch" href="/vue-i18n/assets/js/10.13689381.js"><link rel="prefetch" href="/vue-i18n/assets/js/11.aa13f293.js"><link rel="prefetch" href="/vue-i18n/assets/js/12.2b21ead8.js"><link rel="prefetch" href="/vue-i18n/assets/js/13.b3706367.js"><link rel="prefetch" href="/vue-i18n/assets/js/14.1819508a.js"><link rel="prefetch" href="/vue-i18n/assets/js/15.12152ec7.js"><link rel="prefetch" href="/vue-i18n/assets/js/16.c251473e.js"><link rel="prefetch" href="/vue-i18n/assets/js/17.311179bd.js"><link rel="prefetch" href="/vue-i18n/assets/js/18.a9d0f1d4.js"><link rel="prefetch" href="/vue-i18n/assets/js/19.d0288f09.js"><link rel="prefetch" href="/vue-i18n/assets/js/2.aa910774.js"><link rel="prefetch" href="/vue-i18n/assets/js/20.9de38e10.js"><link rel="prefetch" href="/vue-i18n/assets/js/21.65715f7c.js"><link rel="prefetch" href="/vue-i18n/assets/js/22.7b59f449.js"><link rel="prefetch" href="/vue-i18n/assets/js/23.11ece4c3.js"><link rel="prefetch" href="/vue-i18n/assets/js/24.dffd1071.js"><link rel="prefetch" href="/vue-i18n/assets/js/25.97b69148.js"><link rel="prefetch" href="/vue-i18n/assets/js/26.616f0814.js"><link rel="prefetch" href="/vue-i18n/assets/js/27.adf21b94.js"><link rel="prefetch" href="/vue-i18n/assets/js/28.6bf6d42b.js"><link rel="prefetch" href="/vue-i18n/assets/js/29.e8b42909.js"><link rel="prefetch" href="/vue-i18n/assets/js/3.5e63523d.js"><link rel="prefetch" href="/vue-i18n/assets/js/30.24889fb9.js"><link rel="prefetch" href="/vue-i18n/assets/js/31.57bd94a5.js"><link rel="prefetch" href="/vue-i18n/assets/js/32.14dc9bdc.js"><link rel="prefetch" href="/vue-i18n/assets/js/33.4d59e7bf.js"><link rel="prefetch" href="/vue-i18n/assets/js/34.adc9b2af.js"><link rel="prefetch" href="/vue-i18n/assets/js/35.4e6e5ad7.js"><link rel="prefetch" href="/vue-i18n/assets/js/36.7b1eb244.js"><link rel="prefetch" href="/vue-i18n/assets/js/37.6584773d.js"><link rel="prefetch" href="/vue-i18n/assets/js/38.7879de31.js"><link rel="prefetch" href="/vue-i18n/assets/js/39.f7496f35.js"><link rel="prefetch" href="/vue-i18n/assets/js/4.9735c0af.js"><link rel="prefetch" href="/vue-i18n/assets/js/40.b5b5dc72.js"><link rel="prefetch" href="/vue-i18n/assets/js/41.638a9c02.js"><link rel="prefetch" href="/vue-i18n/assets/js/42.222a2780.js"><link rel="prefetch" href="/vue-i18n/assets/js/43.b28cd4fc.js"><link rel="prefetch" href="/vue-i18n/assets/js/44.67f64685.js"><link rel="prefetch" href="/vue-i18n/assets/js/46.5ab1c570.js"><link rel="prefetch" href="/vue-i18n/assets/js/47.d7b6ca42.js"><link rel="prefetch" href="/vue-i18n/assets/js/48.185bface.js"><link rel="prefetch" href="/vue-i18n/assets/js/49.1570bc72.js"><link rel="prefetch" href="/vue-i18n/assets/js/5.0b14e886.js"><link rel="prefetch" href="/vue-i18n/assets/js/50.0e187269.js"><link rel="prefetch" href="/vue-i18n/assets/js/51.c993f5c3.js"><link rel="prefetch" href="/vue-i18n/assets/js/52.d66b2adb.js"><link rel="prefetch" href="/vue-i18n/assets/js/53.21ae73c5.js"><link rel="prefetch" href="/vue-i18n/assets/js/54.cd4c9ca8.js"><link rel="prefetch" href="/vue-i18n/assets/js/55.caa71074.js"><link rel="prefetch" href="/vue-i18n/assets/js/56.c8f906b3.js"><link rel="prefetch" href="/vue-i18n/assets/js/57.388c89dc.js"><link rel="prefetch" href="/vue-i18n/assets/js/58.ad6e14bc.js"><link rel="prefetch" href="/vue-i18n/assets/js/59.3d64068b.js"><link rel="prefetch" href="/vue-i18n/assets/js/6.b88753f1.js"><link rel="prefetch" href="/vue-i18n/assets/js/60.12bfe8e9.js"><link rel="prefetch" href="/vue-i18n/assets/js/61.446dac92.js"><link rel="prefetch" href="/vue-i18n/assets/js/62.88ef088f.js"><link rel="prefetch" href="/vue-i18n/assets/js/63.b6e0a846.js"><link rel="prefetch" href="/vue-i18n/assets/js/64.f3210fad.js"><link rel="prefetch" href="/vue-i18n/assets/js/65.afac79e3.js"><link rel="prefetch" href="/vue-i18n/assets/js/66.d403fc3a.js"><link rel="prefetch" href="/vue-i18n/assets/js/67.0bffd98a.js"><link rel="prefetch" href="/vue-i18n/assets/js/7.eaeacaf7.js"><link rel="prefetch" href="/vue-i18n/assets/js/8.344bd519.js"><link rel="prefetch" href="/vue-i18n/assets/js/9.ec02aae8.js">
<link rel="stylesheet" href="/vue-i18n/assets/css/0.styles.c299b601.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-i18n/" class="home-link router-link-active"><!----> <span class="site-name">Vue I18n</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Learn</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-i18n/guide/formatting.html" class="nav-link">Guide</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/api/" class="nav-link">API</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Official Tooling</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-cli-plugin-i18n" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue CLI Plugin
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-i18n-loader" target="_blank" rel="noopener noreferrer" class="nav-link external">
Webpack Loader
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://intlify.github.io/eslint-plugin-vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
ESLint Plugin
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-i18n-extensions" target="_blank" rel="noopener noreferrer" class="nav-link external">
Extensions
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li class="dropdown-item"><h4>3rd Party Tooling</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01" target="_blank" rel="noopener noreferrer" class="nav-link external">
BabelEdit
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally" target="_blank" rel="noopener noreferrer" class="nav-link external">
i18n Ally
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://www.patreon.com/kazupon" target="_blank" rel="noopener noreferrer" class="nav-link external">
Patreon
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/kazupon/vue-i18n/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
Release Notes
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-i18n/started.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/zh/started.html" class="nav-link">简体中文</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/ru/started.html" class="nav-link">Русский</a></li></ul></div></div> <a href="https://github.com/kazupon/vue-i18n" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Learn</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-i18n/guide/formatting.html" class="nav-link">Guide</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/api/" class="nav-link">API</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>Official Tooling</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-cli-plugin-i18n" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue CLI Plugin
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-i18n-loader" target="_blank" rel="noopener noreferrer" class="nav-link external">
Webpack Loader
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://intlify.github.io/eslint-plugin-vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
ESLint Plugin
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://github.com/kazupon/vue-i18n-extensions" target="_blank" rel="noopener noreferrer" class="nav-link external">
Extensions
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li class="dropdown-item"><h4>3rd Party Tooling</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01" target="_blank" rel="noopener noreferrer" class="nav-link external">
BabelEdit
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-subitem"><a href="https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally" target="_blank" rel="noopener noreferrer" class="nav-link external">
i18n Ally
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://www.patreon.com/kazupon" target="_blank" rel="noopener noreferrer" class="nav-link external">
Patreon
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/kazupon/vue-i18n/releases" target="_blank" rel="noopener noreferrer" class="nav-link external">
Release Notes
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-i18n/started.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/zh/started.html" class="nav-link">简体中文</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/ru/started.html" class="nav-link">Русский</a></li></ul></div></div> <a href="https://github.com/kazupon/vue-i18n" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/vue-i18n/introduction.html" class="sidebar-link">Introduction</a></li><li><a href="/vue-i18n/started.html" class="active sidebar-link">Getting started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-i18n/started.html#html" class="sidebar-link">HTML</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/started.html#javascript" class="sidebar-link">JavaScript</a></li></ul></li><li><a href="/vue-i18n/installation.html" class="sidebar-link">Installation</a></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guide</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-i18n/guide/formatting.html" class="sidebar-link">Formatting</a></li><li><a href="/vue-i18n/guide/pluralization.html" class="sidebar-link">Pluralization</a></li><li><a href="/vue-i18n/guide/datetime.html" class="sidebar-link">DateTime localization</a></li><li><a href="/vue-i18n/guide/number.html" class="sidebar-link">Number localization</a></li><li><a href="/vue-i18n/guide/messages.html" class="sidebar-link">Locale messages syntax</a></li><li><a href="/vue-i18n/guide/fallback.html" class="sidebar-link">Fallback localization</a></li><li><a href="/vue-i18n/guide/component.html" class="sidebar-link">Component based localization</a></li><li><a href="/vue-i18n/guide/directive.html" class="sidebar-link">Custom directive localization</a></li><li><a href="/vue-i18n/guide/interpolation.html" class="sidebar-link">Component interpolation</a></li><li><a href="/vue-i18n/guide/sfc.html" class="sidebar-link">Single file components</a></li><li><a href="/vue-i18n/guide/hot-reload.html" class="sidebar-link">Hot reloading</a></li><li><a href="/vue-i18n/guide/locale.html" class="sidebar-link">Locale changing</a></li><li><a href="/vue-i18n/guide/lazy-loading.html" class="sidebar-link">Lazy loading translations</a></li><li><a href="/vue-i18n/guide/tooling.html" class="sidebar-link">Tooling</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Legacy</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-i18n/legacy/" class="sidebar-link">Migration from v5.x</a></li><li><a href="/vue-i18n/legacy/v5.html" class="sidebar-link">documentation for v5.x</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting started</h1> <div class="tip custom-block"><p class="custom-block-title">NOTE</p> <p>We will be using <a href="https://github.com/lukehoban/es6features" target="_blank" rel="noopener noreferrer">ES2015<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> in the
code samples in the guide.</p></div> <h2 id="html"><a href="#html" class="header-anchor">#</a> HTML</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/vue/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/vue-i18n/dist/vue-i18n.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ $t("message.hello") }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="javascript"><a href="#javascript" class="header-anchor">#</a> JavaScript</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).</span>
<span class="token comment">// import Vue from 'vue'</span>
<span class="token comment">// import VueI18n from 'vue-i18n'</span>
<span class="token comment">//</span>
<span class="token comment">// Vue.use(VueI18n)</span>
<span class="token comment">// Ready translated locale messages</span>
<span class="token keyword">const</span> messages <span class="token operator">=</span> <span class="token punctuation">{</span>
en<span class="token operator">:</span> <span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token punctuation">{</span>
hello<span class="token operator">:</span> <span class="token string">'hello world'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
ja<span class="token operator">:</span> <span class="token punctuation">{</span>
message<span class="token operator">:</span> <span class="token punctuation">{</span>
hello<span class="token operator">:</span> <span class="token string">'こんにちは、世界'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// Create VueI18n instance with options</span>
<span class="token keyword">const</span> i18n <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueI18n</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
locale<span class="token operator">:</span> <span class="token string">'ja'</span><span class="token punctuation">,</span> <span class="token comment">// set locale</span>
messages<span class="token punctuation">,</span> <span class="token comment">// set locale messages</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// Create a Vue instance with `i18n` option</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> i18n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
<span class="token comment">// Now the app has started!</span>
</code></pre></div><p>Output the following:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>こんにちは、世界<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/kazupon/vue-i18n/edit/master/vuepress/started.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/5/2019, 3:35:51 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-i18n/introduction.html" class="prev">
Introduction
</a></span> <span class="next"><a href="/vue-i18n/installation.html">
Installation
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-i18n/assets/js/app.5b04e7b0.js" defer></script><script src="/vue-i18n/assets/js/45.550cbef0.js" defer></script>
</body>
</html>