9.3.0-beta.14-5aefaa2 • Published 2 months ago

petite-vue-i18n-edge v9.3.0-beta.14-5aefaa2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

petite-vue-i18n

Small size subset of Vue I18n

petite-vue-i18n is an alternative distribution of Vue I18n, which provides only minimal features.

:question: What is the difference from Vue I18n ?

  • The Size is smaller than vue-i18n
    • CDN or without a Bundler
      • Reduce size: runtime + compiler ~36%, runtime only ~49%
      • petite-vue-i18n: runtime + compiler ~7.48KB, runtime only ~4.07KB (production build, brotli compression)
      • vue-i18n: runtime + compiler ~11.71KB, runtime only ~8.30KB (production build, brotli compression)
    • ES Modules for browser
      • Reduce size: runtime + compiler ~35%, runtime only ~49%
      • petite-vue-i18n: runtime + compiler ~7.51KB, runtime only ~4.09KB (production build, brotli compression)
      • vue-i18n: runtime + compiler ~11.73KB, runtime only ~8.34KB (production build, brotli compression)
    • Bundle size
      • Reduce size from vue-i18n: runtime + compiler ~14%, runtime only ~22% (Code size check measurement of vue-i18n and petite-vue-i18n)
  • The legacy API is not supported, only the composition API
  • The APIs for the following DateTime Formats, Number Formats, and utilities aren’t included. Translation only
    • n, $n
    • d, $d
    • rt, $rt
    • tm, $tm
    • getDateTimeFormat, setDateTimeFormat, mergeDateTimeFormat
    • getNumberFormat, setNumberFormat, mergeNumberFormat
  • The only locale messages that can be handled are simple key-values. if you can handle hierarchical locale messages, you need to customize them using the API
  • The algorithm of local fallback is the array order specified in fallbackLocale
  • Custom directive v-t isn’t included
  • The following components provided by vue-i18n aren’t included
    • Translation i18n-t
    • DatetimeFormat i18n-d
    • NumberFormat i18n-n

:hammer: The use case of petite-vue-i18n

vue-i18n includes various i18n features such as translation, datetimes format and number formats. Some projects may only use translation and not datetime formats. At the moment, even in that case, the code for that feature is included.

If your project only uses t or $t API for translation, so we recommended you would use petite-vue-i18n better than vue-i18n. And your project needs the features of vue-i18n, you can smoothly migrate from petite-vue-i18n to vue-i18n. This means that it’s progressive enhancement.

:warning: About the supporting of petite-vue-i18n

Note that petite-vue-i18n is still experimental, and you may encounter bugs and unsupported use cases. Proceed at your own risk.

However, please don’t worry about it. Depending on the usage of petite-vue-i18n and the feedback, we would like to use it refer to the development of the next version of vue-i18n. This means we will to maintain it.

We welcome your feedback on petite-vue-i18n.

:cd: Installation

Basically, it’s the same as installing vue-i18n. The only difference is that the part of URL or part of path are changed from vue-i18n to petite-vue-i18n.

CDN

You need to insert the following scripts to end of <head>:

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>

The following is the application code with the script tag:

<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')
</script>

Package managers

NPM:

npm install petite-vue-i18n

Yarn:

yarn add petite-vue-i18n
import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

:rocket: Usage

Hello world

Template:

<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>

Scripts:

const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// or for ES modules
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界!'
    }
  }
})

// define App component
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

Use the same message resolver and locale fallbacker as vue-i18n

In petite-vue-i18n, the message resolver and locale fallbacker use simple implementations to optimize code size, as described in the differences section, as the belows:

  • message resolver
    • Resolves key-value style locale messages
    • About implementation, see the here
  • locale fallbacker
    • Fallback according to the array order specified in fallbackLocale
    • If a simple string locale is specified, fallback to that locale
    • About implementation, see the here

If you want to use the same message resolver and locale fallbacker as vue-i18n, you can change them using the API.

Note that at this time, only bundlers like vite and webpack are supported.

You need to install @intlify/core-base to your project with package manager.

$ npm install --save @intlify/core-base@alpha
# or
# yarn add @intlify/core-base@alpha

Then, at the entry point of the application, configure the message resolver and locale fallbacker using the API as the below:

import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'
import {
  registerMessageResolver, // register the message resolver API
  resolveValue, // message resolver of vue-i18n which is used by default
  registerLocaleFallbacker, // register the locale fallbacker API
  fallbackWithLocaleChain // locale fallbacker of vue-i18n which is used by default
} from '@intlify/core-base'

// register message resolver of vue-i18n
registerMessageResolver(resolveValue)

// register locale fallbacker of vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)

// some thing code ...
// ...

With the above settings, locale message resolving and locale fallbacking will be handled in the same way as in vue-i18n, note that the code size will increase slightly.

:copyright: License

MIT

9.14.0-3eb9d52

2 months ago

9.14.1-963b95b

2 months ago

9.14.1-af67265

2 months ago

9.14.0-8e9f6d5

3 months ago

9.13.1-5e882ce

7 months ago

9.13.1-e37cba0

7 months ago

9.13.0-8934933

7 months ago

9.13.0-9e73535

7 months ago

9.12.1-a17e764

7 months ago

9.12.1-26f058d

7 months ago

9.12.1-6c62f29

7 months ago

9.12.1-a5e0010

7 months ago

9.12.0-8afb579

7 months ago

9.12.0-69914ea

7 months ago

9.12.0-c43050e

7 months ago

9.11.1-74e9b2d

7 months ago

9.11.0-4958e4a

8 months ago

9.11.0-bf2a635

8 months ago

9.11.0-1e6f9aa

8 months ago

9.11.1-41c1e86

8 months ago

9.11.0-842a7c1

8 months ago

9.11.0-51c0b29

8 months ago

9.11.0-fa89a4d

8 months ago

9.11.0-2f73a24

8 months ago

9.10.2-c2d4c61

8 months ago

9.10.2-0c0bfc8

8 months ago

9.10.1-d1aadbe

8 months ago

9.10.2-e2324af

8 months ago

9.10.1-a803b4d

9 months ago

9.9.1-7d28dd2

9 months ago

9.10.1-6879f9a

9 months ago

9.9.1-355c605

9 months ago

9.9.1-8eb10cd

9 months ago

9.9.1-0f1e5db

9 months ago

9.9.1-ab0f95d

10 months ago

9.9.0-ee5ef6e

10 months ago

9.9.0-3b237b8

10 months ago

9.9.1-b799503

10 months ago

9.9.0-dc5868e

10 months ago

9.9.0-ea8e73c

10 months ago

9.9.0-f094ab4

10 months ago

9.9.0-55c909c

11 months ago

9.8.0-a287a26

11 months ago

9.8.0-465ddf0

11 months ago

9.8.0-12ef51d

11 months ago

9.8.0-59231c8

11 months ago

9.8.0-0d4a5d5

11 months ago

9.8.0-827095e

11 months ago

9.8.0-c4b76bf

11 months ago

9.5.0-dfab963

1 year ago

9.5.0-8568eb1

1 year ago

9.6.4-9302664

1 year ago

9.7.1-1345c99

12 months ago

9.6.3-c4f83e9

1 year ago

9.5.0-bd7ec22

1 year ago

9.5.0-3caed81

1 year ago

9.7.0-58ef63d

1 year ago

9.6.0-bcebec3

1 year ago

9.5.0-9c3e2b2

1 year ago

9.5.0-37a15fa

1 year ago

9.5.0-9c6fd73

1 year ago

9.6.5-9d337bf

1 year ago

9.7.1-2509509

1 year ago

9.8.0-827e4ad

12 months ago

9.5.0-45b274f

1 year ago

9.5.0-8508472

1 year ago

9.6.1-da6b07e

1 year ago

9.6.0-605df05

1 year ago

9.7.0-c3d3abc

1 year ago

9.6.4-7de870e

1 year ago

9.6.2-3882110

1 year ago

9.6.5-5f028da

1 year ago

9.3.0-b8add25

1 year ago

9.3.0-6e294c7

1 year ago

9.4.0-1a1a8e1

1 year ago

9.4.0-b5c0dd1

1 year ago

9.5.0-3aea74c

1 year ago

9.4.1-11dd649

1 year ago

9.3.0-55ae5d2

1 year ago

9.4.0-7217a25

1 year ago

9.4.1-85731e2

1 year ago

9.3.0-110d837

1 year ago

9.4.1-cdfff41

1 year ago

9.3.0-02f3ccc

1 year ago

9.3.0-f2e38ac

1 year ago

9.4.0-dcec936

1 year ago

9.4.1-bec9dda

1 year ago

9.4.1-2c1a08e

1 year ago