Morioh
Login
Amina Semhar

Amina Semhar

3 years ago

Internationalization for your awesome Vue App

V-Intl

Intl in your dopeass Vue app.

List formatting

This package enable language-sensitive list formatting using Intl.ListFormat constructor.

Usage example

conjunction

<template>
  <!-- output will be: "Motorcycle, Bus, and Car" -->
  <v-intl-list-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlListFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlListFormat,
    },
    data() {
      return {
        payload: ['Motorcycle', 'Bus', 'Car'],
        formatOptions: {
          locales: 'en', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: { 
            style: 'long',
            type: 'conjunction' 
          }
        }
      };
    },
  };
</script>

disjunction

<template>
  <!-- output will be: "Motorcycle, Bus or Car" -->
  <v-intl-list-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlListFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlListFormat,
    },
    data() {
      return {
        payload: ['Motorcycle', 'Bus', 'Car'],
        formatOptions: {
          locales: 'en-GB', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: { 
            style: 'short',
            type: 'disjunction' 
          }
        }
      };
    },
  };
</script>

unit

<template>
  <!-- output will be: "Motorcycle Bus Car" -->
  <v-intl-list-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlListFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlListFormat,
    },
    data() {
      return {
        payload: ['Motorcycle', 'Bus', 'Car'],
        formatOptions: {
          locales: 'en-GB', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: { 
            style: 'narrow',
            type: 'unit' 
          }
        }
      };
    },
  };
</script>

formatToParts

<template>
  <!-- output will be:
  [ 
    { "type": "element", "value": "Motorcycle" }, 
    { "type": "literal", "value": ", " }, 
    { "type": "element", "value": "Bus" },
    { "type": "literal", "value": ", and " },
    { "type": "element", "value": "Car" } 
  ];
  -->
  <v-intl-list-format
    wrapper="w-full"
    :to-parts="true"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlListFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlListFormat,
    },
    data() {
      return {
        payload: ['Motorcycle', 'Bus', 'Car'],
        formatOptions: {
          locales: 'en', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: { 
            style: 'long',
            type: 'conjunction' 
          }
        }
      };
    },
  };
</script>

Number formatting

This package enable language-sensitive number formatting using Intl.NumberFormat constructor.

Usage example

Currency

<template>
  <!-- output will be: "123.456,79 €" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlNumberFormat,
    },
    data() {
      return {
        payload: 123456.789,
        formatOptions: {
          locales: 'de-DE', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: { 
            style: 'currency',
            currency: 'EUR'
          }
        }
      };
    },
  };
</script>

Limit to three significant digits

<template>
  <!-- output will be: "1,23,000" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlNumberFormat,
    },
    data() {
      return {
        payload: 123456.789,
        formatOptions: {
          locales: 'en-IN', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: {
            maximumSignificantDigits: 3,
          }
        }
      };
    },
  };
</script>

Using style as unit

<template>
  <!-- output will be: "50 mi/h" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlNumberFormat,
    },
    data() {
      return {
        payload: 50,
        formatOptions: {
          locales: 'pt-PT', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: {
            style: 'unit',
            unit: "mile-per-hour"
          }
        }
      };
    },
  };
</script>

Using notation

<template>
  <!-- output will be: "9,877E8" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="987654321"
    :format="{ 'pt-PT', { notation: "scientific" } }"
  />
  <!-- output will be: "987.654E6" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="987654321"
    :format="{ 'en-GB', { notation: "engineering" } }"
  />
  <!-- output will be: "9.9亿" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="987654321"
    :format="{ 'zh-CN', { notation: "compact" } }"
  />
  <!-- output will be: "988M" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="987654321"
    :format="{ 'fr', { notation: "compact" , compactDisplay: "long" } }"
  />
  <!-- output will be: "9.9亿" -->
  <v-intl-number-format
    wrapper="w-full"
    :payload="987654321"
    :format="{ 'en-GB', { notation: "compact" , compactDisplay: "short" } }"
  />
</template>
<script>
  import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlNumberFormat,
    },
  };
</script>

Date & time formatting 🧪

The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting.

Usage examples

Get Region Names in English

<template>
  <!-- output will be: "'12/20/2012'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="{ locales: 'en-US' }"
  />
  <!-- output will be: "'20/12/2012'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="{ locales: 'en-GB' }"
  />
  <!--
    Include a fallback language, in this case Indonesian 
    output will be: "'20/12/2012'"
  -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="{ locales: ['ban', 'id'] }"
  />
  <!-- output will be: "'١٩‏/١٢‏/٢٠١٢'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="{ locales: 'ar-EG' }"
  />
</template>
<script>
  import { VIntlDateTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlDateTimeFormat,
    },
    data() {
      return {
        payload: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)),
      };
    },
  };
</script>

Using format.options

<template>
  <!-- output will be: "'Donnerstag, 20\. Dezember 2012'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="format"
  />
</template>
<script>
  import { VIntlDateTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlDateTimeFormat,
    },
    data() {
      return {
        payload: new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)),
        format: {
          locales: 'de-DE',
          options: {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
          }
        }
      };
    },
  };
</script>

UTC visible example

<template>
  <!-- output will be: "'Thursday, December 20, 2012, GMT'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="format"
  />
</template>
<script>
  import { VIntlDateTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlDateTimeFormat,
    },
    data() {
      return {
        payload: new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)),
        format: {
          locales: 'en-US',
          options: {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            timeZone: 'UTC',
            timeZoneName: 'short'
          }
        }
      };
    },
  };
</script>

More precision

<template>
  <!-- output will be: "'2:00:00 pm AEDT'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="format"
  />
</template>
<script>
  import { VIntlDateTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlDateTimeFormat,
    },
    data() {
      return {
        payload: new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)),
        format: {
          locales: 'en-AU',
          options: {
            hour: 'numeric',
            minute: 'numeric',
            second: 'numeric', 
            timeZone: 'Australia/Sydney',
            timeZoneName: 'short'
          },
        },
      };
    },
  };
</script>

Period of the day

<template>
  <!-- output will be: "'10 at night'" -->
  <v-intl-date-time-format
    wrapper="w-full"
    :payload="payload"
    :format="format"
  />
</template>
<script>
  import { VIntlDateTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlDateTimeFormat,
    },
    data() {
      return {
        payload: new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)),
        format: {
          locales: 'en-US',
          options: {
            hour: "numeric",
            dayPeriod: "short"
          },
        },
      };
    },
  };
</script>

Download Details:

Author: vinayakkulkarni

Live Demo: https://v-intl.netlify.app/

GitHub: https://github.com/vinayakkulkarni/v-intl

#vuejs #vue #vue-js #javascript

Internationalization for your awesome Vue App
3.95 GEEK