This repository has been archived by the owner on Dec 31, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 860
/
Copy pathstarted.html
98 lines (91 loc) · 26.6 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
<!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.10da93c6.css" as="style"><link rel="preload" href="/vue-i18n/assets/js/app.aba902dd.js" as="script"><link rel="preload" href="/vue-i18n/assets/js/23.02a29770.js" as="script"><link rel="prefetch" href="/vue-i18n/assets/js/10.af15d2ae.js"><link rel="prefetch" href="/vue-i18n/assets/js/11.d2b656d4.js"><link rel="prefetch" href="/vue-i18n/assets/js/12.d067951a.js"><link rel="prefetch" href="/vue-i18n/assets/js/13.a2f8a465.js"><link rel="prefetch" href="/vue-i18n/assets/js/14.2fc74920.js"><link rel="prefetch" href="/vue-i18n/assets/js/15.adfc0753.js"><link rel="prefetch" href="/vue-i18n/assets/js/16.b53d6435.js"><link rel="prefetch" href="/vue-i18n/assets/js/17.442942b1.js"><link rel="prefetch" href="/vue-i18n/assets/js/18.cc5e70b0.js"><link rel="prefetch" href="/vue-i18n/assets/js/19.8c5ce46c.js"><link rel="prefetch" href="/vue-i18n/assets/js/2.eed32894.js"><link rel="prefetch" href="/vue-i18n/assets/js/20.3778d8e5.js"><link rel="prefetch" href="/vue-i18n/assets/js/21.effdf5c2.js"><link rel="prefetch" href="/vue-i18n/assets/js/22.0b83865b.js"><link rel="prefetch" href="/vue-i18n/assets/js/24.233a28e7.js"><link rel="prefetch" href="/vue-i18n/assets/js/25.e3006b5e.js"><link rel="prefetch" href="/vue-i18n/assets/js/26.fa9c088f.js"><link rel="prefetch" href="/vue-i18n/assets/js/27.a0e8eb5f.js"><link rel="prefetch" href="/vue-i18n/assets/js/28.a47ee6a8.js"><link rel="prefetch" href="/vue-i18n/assets/js/29.47754797.js"><link rel="prefetch" href="/vue-i18n/assets/js/3.915f7f5a.js"><link rel="prefetch" href="/vue-i18n/assets/js/30.afa3a4c3.js"><link rel="prefetch" href="/vue-i18n/assets/js/31.1c807aea.js"><link rel="prefetch" href="/vue-i18n/assets/js/32.fe5d0c7c.js"><link rel="prefetch" href="/vue-i18n/assets/js/33.eaedd5e4.js"><link rel="prefetch" href="/vue-i18n/assets/js/34.5d153a0d.js"><link rel="prefetch" href="/vue-i18n/assets/js/35.a9bd9118.js"><link rel="prefetch" href="/vue-i18n/assets/js/36.f8a115cc.js"><link rel="prefetch" href="/vue-i18n/assets/js/37.1040bcf2.js"><link rel="prefetch" href="/vue-i18n/assets/js/38.94e4d67f.js"><link rel="prefetch" href="/vue-i18n/assets/js/39.25206273.js"><link rel="prefetch" href="/vue-i18n/assets/js/4.73d340ae.js"><link rel="prefetch" href="/vue-i18n/assets/js/40.9a9569db.js"><link rel="prefetch" href="/vue-i18n/assets/js/41.240fc55a.js"><link rel="prefetch" href="/vue-i18n/assets/js/42.62de6c7a.js"><link rel="prefetch" href="/vue-i18n/assets/js/43.7b38e56e.js"><link rel="prefetch" href="/vue-i18n/assets/js/44.0acad2b8.js"><link rel="prefetch" href="/vue-i18n/assets/js/45.c200843b.js"><link rel="prefetch" href="/vue-i18n/assets/js/5.f4250a27.js"><link rel="prefetch" href="/vue-i18n/assets/js/6.4c7b30fc.js"><link rel="prefetch" href="/vue-i18n/assets/js/7.219a33d2.js"><link rel="prefetch" href="/vue-i18n/assets/js/8.7b15356e.js"><link rel="prefetch" href="/vue-i18n/assets/js/9.20c7b1f7.js">
<link rel="stylesheet" href="/vue-i18n/assets/css/0.styles.10da93c6.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://kazupon.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>Translation 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></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></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://kazupon.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>Translation 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></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></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" aria-hidden="true" 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" aria-hidden="true" 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" aria-hidden="true" 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 punctuation">:</span> <span class="token punctuation">{</span>
message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
hello<span class="token punctuation">:</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 punctuation">:</span> <span class="token punctuation">{</span>
message<span class="token punctuation">:</span> <span class="token punctuation">{</span>
hello<span class="token punctuation">:</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 punctuation">:</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, 11: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.aba902dd.js" defer></script><script src="/vue-i18n/assets/js/23.02a29770.js" defer></script>
</body>
</html>