> For the complete documentation index, see [llms.txt](https://bpio.gitbook.io/piman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bpio.gitbook.io/piman/dev-guide/vue2/i18n.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.