Quasar 语言包是指 Quasar 自身组件的国际化，其中一些组件带有标签。

¥A Quasar Language Pack refers to the internationalization of Quasar’s own components, some of which have labels.

// quasar.config file

return {
  framework: {
    config: {
      lang: /* look at QuasarConfOptions from the API card */
    }
  }
}

如上所述，一些 Quasar 组件有自己的标签。说到国际化，一种选择是通过 Quasar 组件（如 QTable）每个实例上的标签属性配置标签。你可以这样自定义文本以匹配所选语言。然而，这会耗费时间，并给你的网站/应用增加不必要的复杂性。相反，你可以使用 Quasar 语言包，其中有许多已为你翻译的标准标签定义，例如 “取消”、“清除”、“选择”、“更新” 等。无需再次翻译这些！它是开箱即用的。

¥As mentioned above, some Quasar components have their own labels. When it comes to internationalization, one option is to configure labels through the label properties on each instance of Quasar components (like QTable). This is how you can customize the text to match the selected language. This however, takes time and adds unnecessary complexity to your website/app. Instead, you can use the Quasar Language Packs which have a number of standard label definitions translated for you, like “Cancel”, “Clear”, “Select”, “Update”, etc. No need to translate these again! And it comes out of the box.

配置默认语言包(Configuring the default Language Pack)

¥Configuring the default Language Pack

除非另有配置（见下文），否则 Quasar 默认使用 en-US 语言包。

¥Unless configured otherwise (see below), Quasar uses the en-US Language Pack by default.

硬编码(Hardcoded)

¥Hardcoded

如果默认的 Quasar 语言包不是动态确定的（例如，不依赖于 cookie），那么你可以：

¥If the default Quasar Language Pack is not dynamically determined (does not depend on cookies for example), then you can:

// quasar.config file

framework: {
  lang: 'de'
}

动态（非 SSR）(Dynamical (non-SSR))

¥Dynamical (non-SSR)

Quasar CLI:如果你所需的 Quasar 语言包必须动态选择（例如：依赖于 cookie），那么你需要创建一个启动文件：$ quasar new boot quasar-lang-pack [--format ts]。这将创建 /src/boot/quasar-lang-pack.js 文件。将其编辑为：

¥Quasar CLI: If your desired Quasar Language Pack must be dynamically selected (example: depends on a cookie), then you need to create a boot file: $ quasar new boot quasar-lang-pack [--format ts]. This will create /src/boot/quasar-lang-pack.js file. Edit it to:

import { defineBoot } from '#q-app/wrappers'
import { Lang } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).js')

export default defineBoot(async () => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]().then(lang => {
      Lang.set(lang.default)
    })
  }
  catch (err) {
    console.error(err)
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
})

然后将此启动文件注册到 /quasar.config 文件中：

¥Then register this boot file into the /quasar.config file:

boot: [
  'quasar-lang-pack'
]

动态（SSR）(Dynamical (SSR))

¥Dynamical (SSR)

在处理 SSR 时，我们不能使用单例对象，因为这会污染会话。因此，与上面的动态示例（请先阅读！）相反，你还必须在启动文件中指定 ssrContext：

¥When dealing with SSR, we can’t use singleton objects because that would pollute sessions. As a result, as opposed to the dynamical example above (read it first!), you must also specify the ssrContext from your boot file:

import { defineBoot } from '#q-app/wrappers'
import { Lang } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/lang/(de|fr).js')

// ! NOTICE ssrContext param:
export default defineBoot(async ({ ssrContext }) => {
  const langIso = 'de' // ... some logic to determine it (use Cookies Plugin?)

  try {
    langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]().then(lang => {
      Lang.set(lang.default, ssrContext)
    })
  }
  catch (err) {
    console.error(err)
    // Requested Quasar Language Pack does not exist,
    // let's not break the app, so catching error
  }
})

在运行时更改 Quasar 语言包(Change Quasar Language Pack at Runtime)

¥Change Quasar Language Pack at Runtime

更改语言包(Changing Language Pack)

¥Changing Language Pack

使用 QSelect 动态更改 Quasar 组件语言的示例：

¥Example with a QSelect to dynamically change the Quasar components language:

<template>
  <q-select
    v-model="lang"
    :options="langOptions"
    label="Quasar Language"
    dense
    borderless
    emit-value
    map-options
    options-dense
    style="min-width: 150px"
  />
  <div>{{ $q.lang.label.close }}</div>
</template>

<script>
import { useQuasar } from 'quasar'
import languages from 'quasar/lang/index.json'
import { ref, watch } from 'vue'

const modules = import.meta.glob('../../node_modules/quasar/lang/(de|en-US|es).js')

const appLanguages = languages.filter(lang =>
  ['de', 'en-US', 'es'].includes(lang.isoName)
)

const langOptions = appLanguages.map(lang => ({
  label: lang.nativeName, value: lang.isoName
}))

export default {
  setup () {
    const $q = useQuasar()
    const lang = ref($q.lang.isoName)

    watch(lang, val => {
      modules[`../../node_modules/quasar/lang/${val}.js`]().then(lang => {
        $q.lang.set(lang.default)
      })
    })

    return {
      lang,
      langOptions
    }
  }
}
</script>

运行时更改特定标签(Changing a Specific Label at Runtime)

¥Changing a Specific Label at Runtime

如果你想将特定标签更改为其他标签，你可以这样做。以下是示例：

¥If you want to change a specific label to another, you can. Here is an example:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  function changeLabel () {
    $q.lang.table.noData = 'Hey... there is no data...'
  }

  return { changeLabel }
}

如果你想在 .vue 文件之外执行此操作（并且你未处于 SSR 模式），则可以

¥If you want to do this outside of a .vue file (and you are NOT on SSR mode) then you can

import { defineBoot } from '#q-app/wrappers'
import { Lang } from 'quasar'

export default defineBoot(() {
  Lang.props.table.noData = 'Hey... there is no data...'
})

在应用空间中使用 Quasar 语言包(Using Quasar Language Pack in App Space)

¥Using Quasar Language Pack in App Space

虽然 Quasar 语言包仅供 Quasar 组件内部使用，但你仍然可以将其标签用于你自己的网站/应用组件。

¥Although the Quasar Language Packs are designed only for Quasar components internal usage, you can still use their labels for your own website/app components too.

"Close" label in current Quasar Language Pack is:
{{ $q.lang.label.close }}

在 GitHub 上检查 Quasar 语言包，以了解 $q.lang 的结构。

¥Check a Quasar Language Pack on GitHub to see the structure of $q.lang.

检测语言环境(Detecting Locale)

¥Detecting Locale

Quasar 还提供了一种开箱即用的方法来确定用户语言环境：

¥There’s also a method to determine user locale which is supplied by Quasar out of the box:

// outside of a Vue file
import { Lang } from 'quasar'
Lang.getLocale() // returns a string

// inside of a Vue file
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  $q.lang.getLocale() // returns a string
}