vue-lux

vue-lux is a Vue 3 library that simplifies DateTime formatting and parsing using the powerful Luxon library. Inspired by vue-luxon.

Install

yarn add vue-lux
pnpm i vue-lux
npm i vue-lux

Vue

import { createApp } from 'vue'
import VueLuxon from 'vue-lux'
import App from './App.vue'

const app = createApp(App)
app.use(VueLux, {
  input: {
    zone: 'utc',
    format: 'iso'
  },
  output: 'short'
})
app.mount('#app')

Nuxt

export default defineNuxtConfig({
  modules: ['vue-lux/nuxt'],
  lux: {
    input: {
      zone: 'utc',
      format: 'iso'
    },
    output: 'short'
  }
})

By default, vue-lux expect the given datetime string to be time zone utc and format iso . The output will be based on the client's locale.

Learn more about settings

Formatting

You can use the $lux or $lf method everywhere in your vue app to formate a date:

this.$lux('2020-10-05T14:48:00.000Z')
// October 5, 2020

You can change the output format:

this.$lux('2020-10-05T14:48:00.000Z', 'dd-MM-yyyy')
// 05-10-2020

this.$lux('2020-10-05 22:36', 'relative')
// 22 days ago

And other settings:

this.$lux('2020-10-05 22:36', 'full', { format: 'yyyy-MM-dd HH:mm', zone: 'Asia/Tokyo' })
// October 5, 2020, 3:36 PM GMT+2

These formats will be in the clients browser language, unless you set a [specific language].

Parsing

You can use the $lp method to parse a date and retrive a Luxon DateTime object:

this.$lp('2020-10-05T14:48:00.000Z')
// DateTime { 2020-10-05T14:48:00.000Z }

this.$lp('2020-10-05 22:36', 'yyyy-MM-dd HH:mm')
// DateTime { 2020-10-05T22:36:00.000Z }

Settings

You can define the default input and output settings in the plugin options.

{
  input: {
    zone: 'utc',
    format: 'iso',
  },
  output: {
    locale: 'en',
    format: 'short',
  },
  templates: {
    userDate: {
      zone: 'client',
      format: 'dd MM yyyy',
    },
    serverAMS: {
      zone: 'Europe/Amsterdam',
      format: 'dd-MM-yyyy HH:mm:ss',
    },
    client: {
      zone: 'local',
      format: 'short',
    },
  },
}

Templates

Templates are predefined formats that can be used to quickly format and parse.

// Will use the template userDate to format the date
this.$lux('2020-10-05T14:48:00.000Z', 'userDate')
// 05 10 2020

// Will use serverAMS template to parse the date
this.$lp('2020-10-05 22:36', 'serverAMS')
// DateTime { 2020-10-05T22:36:00.000Z }

// Will use serverAMS template to parse and userDate template to format the date
this.$lux('2020-10-05 22:36', 'userDate', 'serverAMS')
// 05 10 2020

By default there are these templates available:

Input

The input can be one of the following types:

• string: A string representation of a date or time.
• number: A numeric representation of a date or time, such as a timestamp.
• Date: A JavaScript Date object.
• DateTime: A DateTime object from the Luxon library.

Along with the input, you can also specify the input format and zone.

import type { Zone } from 'luxon'

interface InputOptions {
  format: string
  zone?: string | Zone
}

Available formats are:

Output

import type { DateTimeFormatOptions, ToISOTimeOptions, ToRelativeOptions, ToSQLOptions, Zone } from 'luxon'

interface OutputOptions {
  locale?: string
  format?: string | DateTimeFormatOptions | Intl.DateTimeFormatOptions
  relative?: ToRelativeOptions
  sql?: ToSQLOptions
  iso?: ToISOTimeOptions
  zone?: string | Zone
}

• format: The format to use for formatting.

  • Set of Tokens: You can use a set of tokens to define the output format. Tokens represent different parts of the date and time, such as year, month, day, hour, minute, etc. See Tokens for possible values.
  • Template Name: You can specify the name of a predefined template. Templates are predefined formats that can be used to quickly format dates and times. See Templates for possible values.
  • DateTimeFormatOptions: Options for the DateTime format. See DateTimeFormatOptions for possible values.

• locale: The locale to use for formatting. If not set, the client's locale will be used.

• relative: Options for the relative format. See Relative for possible values.

• sql: Options for the SQL format. See SQL for possible values.

• iso: Options for the ISO format. See ISO for possible values.

Zone

eg: UTC, America/New_York, Asia/Tokyo, ...

For the systems local zone you use local.

There is a list on wikipedia

Locale

Examples:

en: English (primary language). hi: Hindi (primary language). de-AT: German as used in Austria (primary language with country code). zh-Hans-CN: Chinese written in simplified

The client's locale will be used if not set.

Tokens

Tokens are useful for formatting and parsing.

You can use the following tokens:

Full list of tokens can be found here

License

MIT License 2024-PRESENT Donald Shtjefni