vue-lux

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:

format	example (with locale en_US)
short	10/14/1983, 1:30 PM
shorts	10/14/1983, 1:30:23 PM
med	Oct 14, 1983, 1:30 PM
meds	Oct 14, 1983, 9:30:33 AM
full	October 14, 1983, 9:30 AM EDT
fulls	October 14, 1983, 9:30:33 AM EDT
huge	Friday, October 14, 1983, 9:30 AM Eastern Daylight Time
huges	Friday, October 14, 1983, 9:30:33 AM Eastern Daylight Time
time	9:30 AM
times	09:30:23 AM
time24	09:30
time24s	09:30:23
time24longoffset	09:30:23 Eastern Daylight Time
date_full	October 14, 1983
date_huge	Tuesday, October 14, 1983
date_med	Oct 14, 1983
date_medd	Fri, Oct 14, 1983
date_short	10/14/1983

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:

format	description	example
sql	SQL dates, times, and datetimes	2017-05-15 09:24:15
iso	ISO 8601 date time string	2018-01-06T13:07:04.054
rfc2822	RFC 2822	Tue, 01 Nov 2016 13:23:12 +0630
http	HTTP header specs (RFC 850 and 1123)	Sun, 06 Nov 1994 08:49:37 GMT
seconds	Unix timestamp	1542674993
millis	Unix timestamp milliseconds	1542674993410
Date	JavaScript Date object	new Date('2020-10-05T14:48:00.000Z')
DateTime	Luxon DateTime object	DateTime.fromISO('2020-10-05T14:48:00.000Z')
tokens	see: Tokens	yyyy-MM-dd
templateName	see: Templates

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:

Standalone token	Format token	Description	Example
S		millisecond, no padding	54
SSS		millisecond, padded to 3	054
u		fractional seconds, functionally identical to SSS	054
s		second, no padding	4
ss		second, padded to 2 padding	04
m		minute, no padding	7
mm		minute, padded to 2	07
h		hour in 12-hour time, no padding	1
hh		hour in 12-hour time, padded to 2	01
H		hour in 24-hour time, no padding	9
HH		hour in 24-hour time, padded to 2	13
Z		narrow offset	+5
ZZ		short offset	+05:00
ZZZ		techie offset	+0500
ZZZZ		abbreviated named offset	EST
ZZZZZ		unabbreviated named offset	Eastern Standard Time
z		IANA zone	America/New_York
a		meridiem	AM
d		day of the month, no padding	6
dd		day of the month, padded to 2	06
c	E	day of the week, as number from 1-7 (Monday is 1, Sunday is 7)	3
ccc	EEE	day of the week, as an abbreviate localized string	Wed
cccc	EEEE	day of the week, as an unabbreviated localized string	Wednesday
ccccc	EEEEE	day of the week, as a single localized letter	W
L	M	month as an unpadded number	8
LL	MM	month as an padded number	08
LLL	MMM	month as an abbreviated localized string	Aug
LLLL	MMMM	month as an unabbreviated localized string	August
LLLLL	MMMMM	month as a single localized letter	A
y		year, unpadded	2014
yy		two-digit year	14
yyyy		four- to six- digit year, pads to 4	2014
G		abbreviated localized era	AD
GG		unabbreviated localized era	Anno Domini
GGGGG		one-letter localized era	A
kk		ISO week year, unpadded	17
kkkk		ISO week year, padded to 4	2014
W		ISO week number, unpadded	32
WW		ISO week number, padded to 2	32
o		ordinal (day of year), unpadded	218
ooo		ordinal (day of year), padded to 3	218
D		localized numeric date	9/4/2017
DD		localized date with abbreviated month	Aug 6, 2014
DDD		localized date with full month	August 6, 2014
DDDD		localized date with full month and weekday	Wednesday, August 6, 2014
t		localized time	9:07 AM
tt		localized time with seconds	1:07:04 PM
ttt		localized time with seconds and abbreviated offset	1:07:04 PM EDT
tttt		localized time with seconds and full offset	1:07:04 PM Eastern Daylight Time
T		localized 24-hour time	13:07
TT		localized 24-hour time with seconds	13:07:04
TTT		localized 24-hour time with seconds and abbreviated offset	13:07:04 EDT
TTTT		localized 24-hour time with seconds and full offset	13:07:04 Eastern Daylight Time
f		short localized date and time	8/6/2014, 1:07 PM
ff		less short localized date and time	Aug 6, 2014, 1:07 PM
fff		verbose localized date and time	August 6, 2014, 1:07 PM EDT
ffff		extra verbose localized date and time	Wednesday, August 6, 2014, 1:07 PM Eastern Daylight Time
F		short localized date and time with seconds	8/6/2014, 1:07:04 PM
FF		less short localized date and time with seconds	Aug 6, 2014, 1:07:04 PM
FFF		verbose localized date and time with seconds	August 6, 2014, 1:07:04 PM EDT
FFFF		extra verbose localized date and time with seconds	Wednesday, August 6, 2014, 1:07:04 PM Eastern Daylight Time
q		quarter, no padding	9
qq		quarter, padded to 2	13

Full list of tokens can be found here

License

MIT License © 2024-PRESENT Donald Shtjefni

Changelog

v1.2.2

compare changes

📖 Documentation

• README (115434c)

🏡 Chore

• Badge (bb36a83)
• Pnpm (04b621a)
• Pnpm (deeece2)
• Lint (5642d9f)
• Pnpm (a657e21)
• Build (985d94f)

✅ Tests

• Fix zone (09d519b)
• Utc (df860b6)

🤖 CI

• Tests (b35de9f)
• Test (cfcd6da)
• Cov (d13f8c3)
• Coverage (6280994)
• Actions (9076668)

❤️ Contributors

• Donald Shtjefni (@dnldsht)