# i18n

> Your time is limited, so don’t waste it living someone else’s life.
>
> *—— **Steve Jobs***

多語言設定就好像是這句名言，如果沒有翻譯成多種語言，那麼就僅僅是在一個文化圈流傳，這樣有點太可惜了。

<figure><img src="/files/DeokyC5UaW5Iy3KvwedB" alt="" width="188"><figcaption><p>一個寫著不同語言的我愛你的版子。</p></figcaption></figure>

### Vue2

```javascript
//main.js
import Vue from 'vue'

import piman from "@yasai/piman";
import '@yasai/piman/dist/piman.css';
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })
```

### Nuxt2

```javascript
// nuxt.config.js
export default {
  plugins: [
    '@/plugins/piman.js',
  ],
}

// plugins/bp-a11y.js
import Vue from 'vue'
import piman from "@yasai/piman";
Vue.use(piman) //Default is “zh-Hant-TW”
//Vue.use(piman,{ locale: 'en' })

```

### 設定 <a href="#setting" id="setting"></a>

```javascript
import piman from "@yasai/piman"

piman.i18n.use({
  "pagination":{
    "page":"ページ"
  },
})
```

### Bpai18n

```javascript
import BpaI18n from '../locale'

export default Vue.extend({
  mixins: [ BpaI18n ],
  //...
})
```

### 文字 <a href="#text" id="text"></a>

```html
<!-- text -->
<span>{{ t('pagination.per') }}</span>
```

### v-bind

```html
<!-- v-bind -->
<nav
  :aria-label="t('pagination.aria')"
  class="bpa-pagination"
/>
```

### Methods

```javascript
//template
{{ add() }}

//script
methods: {
  add(){
    let text = this.t('pagination.aria')
    text = text + 'Add'
    return text
  },
}
```

### 使用 <a href="#using" id="using"></a>

```javascript
import piman from "@yasai/piman"

piman.i18n.use('en')
```

### 新增語言 <a href="#add" id="add"></a>

1. 新增語言檔至 /lang 資料夾
2. 在 /lang/index.ts 寫 export

### 限制 <a href="#restrict" id="restrict"></a>

若有使用其他第三方套件，則需手動為其改變語言。

### Options

```javascript
// All options
{
  "pagination":{
    "total":"共",
    "page":"頁",
    "per":"每頁",
    "result":"項",
    "goto":"前往",
    "exceed":"噢！此頁碼不適用。",
    "aria":"分頁選擇",
    "input_goto":"請輸入想前往的頁面",
    "first_page_text":"第一頁",
    "prev_page_text":"上一頁",
    "next_page_text":"下一頁",
    "last_page_text":"最後一頁",
  },
  "form":{
    "required": "必填"
  },
  "breadcrumb":{
    "current_page":"現在頁面位置"
  },
  "button":{
    "loading": "載入中"
  },
  "dialog":{
    "close":"關閉燈箱"
  },
  "dropdown":{
    "goto":"前往",
    "new_tab":"另開視窗前往"
  },
  "input":{
    "show":"點擊顯示密碼",
    "hide":"點擊隱藏密碼",
    "clear":"清空輸入",
    "placeholder":"請輸入"
  },
  "msg":{
    "area":"訊息區域",
    "close":"關閉訊息框",
  },
  "select":{
    "placeholder": "請選擇",
    "clear":"清空下拉式選單",
    "search":"搜尋",
    "area_search":"請輸入關鍵字搜尋與過濾下拉式選單選項"
  },
  "collapse":{
    "title": "標題",
  },
  "switch":{
    "off": "關閉",
    "on": "開啟"
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bpio.gitbook.io/piman/dev-guide/vue2/i18n.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.