forked from kazupon/vue-i18n
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstallation.html
76 lines (74 loc) · 35.2 KB
/
installation.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Installation | 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/20.9de38e10.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/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/45.550cbef0.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/installation.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/zh/installation.html" class="nav-link">简体中文</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/ru/installation.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/installation.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/zh/installation.html" class="nav-link">简体中文</a></li><li class="dropdown-item"><!----> <a href="/vue-i18n/ru/installation.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="sidebar-link">Getting started</a></li><li><a href="/vue-i18n/installation.html" class="active sidebar-link">Installation</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#compatibility-note" class="sidebar-link">Compatibility Note</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#direct-download-cdn" class="sidebar-link">Direct Download / CDN</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#npm" class="sidebar-link">NPM</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#yarn" class="sidebar-link">Yarn</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#vue-cli-3-x" class="sidebar-link">Vue Cli 3.x</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#dev-build" class="sidebar-link">Dev Build</a></li><li class="sidebar-sub-header"><a href="/vue-i18n/installation.html#explanation-of-different-builds" class="sidebar-link">Explanation of Different Builds</a></li></ul></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="installation"><a href="#installation" class="header-anchor">#</a> Installation</h1> <h2 id="compatibility-note"><a href="#compatibility-note" class="header-anchor">#</a> Compatibility Note</h2> <ul><li>Vue.js <code>2.0.0</code>+</li></ul> <h2 id="direct-download-cdn"><a href="#direct-download-cdn" class="header-anchor">#</a> Direct Download / CDN</h2> <p><a href="https://unpkg.com/vue-i18n/dist/vue-i18n" target="_blank" rel="noopener noreferrer">https://unpkg.com/vue-i18n/dist/vue-i18n<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></p> <p><a href="https://unpkg.com" target="_blank" rel="noopener noreferrer">unpkg.com<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> provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like <a href="https://unpkg.com/[email protected]/dist/vue-i18n.js" target="_blank" rel="noopener noreferrer">https://unpkg.com/[email protected]/dist/vue-i18n.js<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></p> <p>Include vue-i18n after Vue and it will install itself automatically:</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>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>
</code></pre></div><h2 id="npm"><a href="#npm" class="header-anchor">#</a> NPM</h2> <div class="language-sh extra-class"><pre class="language-text"><code>npm install vue-i18n
</code></pre></div><h2 id="yarn"><a href="#yarn" class="header-anchor">#</a> Yarn</h2> <div class="language-sh extra-class"><pre class="language-text"><code>yarn add vue-i18n
</code></pre></div><p>When using with a module system, you must explicitly install the <code>vue-i18n</code>
via <code>Vue.use()</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueI18n <span class="token keyword">from</span> <span class="token string">'vue-i18n'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueI18n<span class="token punctuation">)</span>
</code></pre></div><p>You don't need to do this when using global script tags.</p> <h2 id="vue-cli-3-x"><a href="#vue-cli-3-x" class="header-anchor">#</a> Vue Cli 3.x</h2> <div class="language-sh extra-class"><pre class="language-text"><code>vue add i18n
</code></pre></div><p>You need Vue cli 3.x as pre-requisite, you can install it on your shell with the next command:</p> <div class="language-sh extra-class"><pre class="language-text"><code>npm install @vue/cli -g
</code></pre></div><h2 id="dev-build"><a href="#dev-build" class="header-anchor">#</a> Dev Build</h2> <p>You will have to clone directly from GitHub and build <code>vue-i18n</code> yourself if you want to use the latest dev build.</p> <div class="language-sh extra-class"><pre class="language-text"><code>git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
cd node_modules/vue-i18n
npm install # or `yarn`
npm run build # or `yarn run build`
</code></pre></div><h2 id="explanation-of-different-builds"><a href="#explanation-of-different-builds" class="header-anchor">#</a> Explanation of Different Builds</h2> <p>In the dist/ <a href="https://cdn.jsdelivr.net/npm/vue-i18n/dist/" target="_blank" rel="noopener noreferrer">directory of the NPM package<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> you will find many different builds of VueI18n. Here’s an overview of the difference between them:</p> <ul><li>UMD: <code>vue-i18n.js</code></li> <li>CommonJS: <code>vue-i18n.common.js</code></li> <li>ES Module for bundlers: <code>vue-i18n.esm.js</code></li> <li>ES Module for browsers: <code>vue-i18n.esm.browser.js</code></li></ul> <h3 id="terms"><a href="#terms" class="header-anchor">#</a> Terms</h3> <ul><li><p><strong><a href="https://github.com/umdjs/umd" target="_blank" rel="noopener noreferrer">UMD<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></strong>: UMD builds can be used directly in the browser via a <code><script></code> tag. The default file from Unpkg CDN at <a href="https://unpkg.com/vue-i18n" target="_blank" rel="noopener noreferrer">https://unpkg.com/vue-i18n<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> is the UMD build (<code>vue-i18n.js</code>).</p></li> <li><p><strong><a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank" rel="noopener noreferrer">CommonJS<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></strong>: CommonJS builds are intended for use with older bundlers like <a href="http://browserify.org/" target="_blank" rel="noopener noreferrer">browserify<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> or <a href="https://webpack.github.io" target="_blank" rel="noopener noreferrer">webpack 1<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>. The default file for these bundlers (<code>pkg.main</code>) is the Runtime only CommonJS build (<code>vue-i18n.common.js</code>).</p></li> <li><p><strong><a href="http://exploringjs.com/es6/ch_modules.html" target="_blank" rel="noopener noreferrer">ES Module<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></strong>: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:</p> <ul><li>ESM for bundlers: intended for use with modern bundlers like <a href="https://webpack.js.org" target="_blank" rel="noopener noreferrer">webpack 2<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> or <a href="https://rollupjs.org/" target="_blank" rel="noopener noreferrer">Rollup<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>. ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform "tree-shaking" and eliminate unused code from your final bundle. The default file for these bundlers (<code>pkg.module</code>) is the Runtime only ES Module build (<code>vue-i18n.esm.js</code>).</li> <li>ESM for browsers (8.11+ only, <code>vue-i18n.esm.browser.js</code>): intended for direct imports in modern browsers via <code><script type="module"></code>.</li></ul></li></ul></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/kazupon/vue-i18n/edit/master/vuepress/installation.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">5/14/2020, 11:30:34 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/vue-i18n/started.html" class="prev">
Getting started
</a></span> <span class="next"><a href="/vue-i18n/guide/formatting.html">
Formatting
</a>
→
</span></p></div> </div> <!----></div></div>
<script src="/vue-i18n/assets/js/app.5b04e7b0.js" defer></script><script src="/vue-i18n/assets/js/20.9de38e10.js" defer></script>
</body>
</html>