Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/intlify/vue-i18n-loader
:globe_with_meridians: vue-i18n loader for custom blocks
https://github.com/intlify/vue-i18n-loader
custom-blocks i18n loader single-file-component vue vue-i18n vue-loader webpack
Last synced: about 3 hours ago
JSON representation
:globe_with_meridians: vue-i18n loader for custom blocks
- Host: GitHub
- URL: https://github.com/intlify/vue-i18n-loader
- Owner: intlify
- License: mit
- Created: 2017-03-29T16:53:26.000Z (over 7 years ago)
- Default Branch: v1.x
- Last Pushed: 2024-09-03T17:31:23.000Z (3 months ago)
- Last Synced: 2024-09-07T11:09:00.186Z (2 months ago)
- Topics: custom-blocks, i18n, loader, single-file-component, vue, vue-i18n, vue-loader, webpack
- Language: TypeScript
- Homepage:
- Size: 1.46 MB
- Stars: 268
- Watchers: 7
- Forks: 29
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
@intlify/vue-i18n-loader
webpack loader for Vue I18n
## :warning: Notice
This package is maintained for Vue I18n v8 (Vue 2).
If you want to use Vue I18n v9 (Vue 3) or later, See the [`@intlify/bundle-tools`](https://github.com/intlify/bundle-tools) repo.
## :cd: Installation
$ npm i --save-dev @intlify/vue-i18n-loader
## :rocket: Usage
the below example that`App.vue` have `i18n` custom block:
### Basic
```vue
{{ $t('hello') }}
export default {
name: 'app',
// ...
}
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
```
The locale messages defined at `i18n` custom blocks are **json format default**.
### Source importing
you also can:
```vue
```
```json5
// ./myLnag.json
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
```
### Locale definition
You can define locale messages for each locale with `locale` attr in single-file components:
```vue
{
"hello": "hello world!"
}
{
"hello": "こんにちは、世界!"
}
```
The above defines two locales, which are merged at target single-file components.
### Locale Messages formatting
Besides json format, You can be used by specifying the following format in the `lang` attribute:
- yaml
- json5
example yaml foramt:
```vue
hello: "hello world!"
hello: "こんにちは、世界！"
```
example json5 format:
```vue
{
"en": {
// comments
"hello": "hello world!"
}
}
```
### JavaScript
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages: {
en: {
// ...
},
ja: {
// ...
}
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
```
### Webpack Config
`vue-loader` (v15 or later):
```javascript
// for vue.config.js (Vue CLI)
module.exports = {
chainWebpack: config => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@intlify/vue-i18n-loader')
}
}
```
`vue-loader` (v15 or later):
```javascript
// for webpack.config.js (Without Vue CLI)
module.exports = {
module: {
rules: [
{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '@intlify/vue-i18n-loader',
},
]
}
}
```
`vue-loader` (~v14.x):
```javascript
// for webpack config file
module.exports = {
module: {
rules: [{
test: /\.vue$/,
loader: 'vue',
options: {
loaders: {
i18n: '@intlify/vue-i18n-loader'
}
}
}]
}
}
```
## :scroll: Changelog
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/vue-i18n-loader/blob/master/CHANGELOG.md).
## :muscle: Contribution
Please make sure to read the [Contributing Guide](https://github.com/intlify/vue-i18n-loader/blob/master/.github/CONTRIBUTING.md) before making a pull request.
## :copyright: License
[MIT](http://opensource.org/licenses/MIT)