Negotiate Pushing Milestone

    @jota-one/i36n
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    i36n

    Translation manager twice simpler and twice better

    Installation

    As npm dependency in your node project

    Simply install it as a dependency of the project you want to internationalize.

    npm install @jota-one/i36n

    Usage

    This a Vue 3 example, but it will also work with the composition-api module in Vue 2. @jota-one/i36n is compatible with Vue 2 and Vue 3 🎉.

    To use it in Vue2, simply use:

    import { provideI36n, useI36n } from '@jota-one/i36n/src/index.vue2.js'

    This module follow the provide/inject pattern, available in Vue. This means that you will first have to provide the translator on a top level part of your application.

    Then you can inject it wherever you need it.

    Provide

    Somewhere before you need your first label, you have to provide the library to your app. In your <script> tag first import the library:

    import { provideI36n } from '@jota-one/i36n'

    In your setup() function, call the provideI36n() function. You need to pass it 2 parameters:

    1. the language identifier (en, de, fr), in a reactive variable (in the example below, it's a prop)
    2. An object containing the load function. The load function is used to... load the labels for the chosen language. In the example below, we are simply asynchronously fetching the labels in a local file, but you can also load them with an XHR request or in any other way.
    <script>
    import { provideI36n } from '@jota-one/i36n'
    // ... imports, etc..
    
    const load = async lang => (await import(`@/i18n/${lang}.json`)).default
    
    setup(props) {
      provideI36n(props.language, { load })
    }
    </script>

    If you pass a 3rd argument (a Vue app instance) to the provideI36n, it will provide the feature on the app directly.

    const app = createApp(App, { ... })
    provideI36n(props.language, { load }, app)

    Internally, it will call app.provide, instead of the standalone provide function.

    Inject

    Once the providing is done, you can inject the library features anywhere in your app by using the useI36n() function.

    In your <script> tag, near the top, import the library

    import { useI36n } from '@jota-one/i36n'

    In your setup() function, call the useI36n() function. It will give you the $label() translation function.

    ⚠️ In Vue 3, you should rename it with a name not starting with à dollar sign, or you will have warnings.

    setup() {
      const { $label: label } = useI36n()
      
      // other cool stuffs
      // ...
      const meal = ref('kebab')
      
      return { label, meal }
    }

    In your template (or inside your setup function, further), use it.

    <h1>{{ label('food_title') }}</h1>
    <p>{{ label('food_favorite', { meal }) }}</p>

    Assuming that your current language translation file looks like this:

    {
      "food_title": "Some great meals",
      "food_favorite": "My favourite meal is {meal}. Yummy!"
    }

    The above template will resolve in:

    <h1>Some great meals</h1>
    <p>My favourite meal is kebab. Yummy!</p>

    And the killer feature

    You can pass a showKey property in the provideI36n() second parameter, along with the load method. This showKey must be a reactive variable (a ref) containing a Boolean.

    As long as its value is false, you won't notice anything. But if you change the value to true, the $label() function will display the label keys and the needed placeholders instead of resolving the label.

    This is incredibly useful while you develop, trust us.

    See a "demo" in the animated gif on this page

    Install

    npm i @jota-one/i36n

    DownloadsWeekly Downloads

    0

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • jorinho
    • tadai