VueLux

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

Configuration

You can configure your custom templates or input or output keys by adding the key lux to the we object in your nuxt.config.js file.

Check the guide under template, input, output section to understand more about this topic.

we: {
  lux: {
    templates: {
      my_template: {
        format: 'dd__MM__yyyy',
      },
    },
    input: {
      zone: 'utc',
      format: 'iso'
    },
    output: 'short'
  },
}

WARNING

Time zone is set to Europe/Rome by default.

For an advanced configuration take a look at vue-luxon.

Composition Api

const date = ref(DateTime.now())

$lux(date, 'short')
// 13/12/2024, 12:00

$lux(date, 'date')
// 13/12/2024

$lux(date, 'time')
// 12:00

import { DateTime } from 'luxon'

const date = ref(DateTime.now())

$lux(date, 'short')
// 13/12/2024 12:00

Formats

Name	Description
short	13/12/2024, 10:36
shorts	13/12/2024, 10:36:59
date	13/12/2024
relative	1 giorno fa
iso	2024-12-13T10:36:59.826+02:00
med	13 dic 2024, 10:36
meds	13 dic 2024, 10:36:59
full	13 dicembre 2024 alle ore 10:36 CEST
fulls	13 dicembre 2024 alle ore 10:36:59 CEST
huge	venerdì 13 dicembre 2024 alle ore 10:36 Ora legale dell’Europa centrale
huges	venerdì 13 dicembre 2024 alle ore 10:36:59 Ora legale dell’Europa centrale
time	10:36
times	10:36:59
time24longoffset	10:36:59 Ora legale dell’Europa centrale
date_full	13 dicembre 2024
date_huge	venerdì 13 dicembre 2024
date_med	13 dic 2023
date_medd	ven 13 dic 2023
date_short	6/4/2023
time24	09:39
time24s	09:39:18
sql	2024-12-13 09:39:18.864 +01:00
http	Fri, 13 Dec 2024 08:39:18 GMT
jsdate	Fri Dec 13 2024 09:39:18 GMT+0100 (Ora standard dell’Europa centrale)
rfc	Fri, 13 Dec 2024 09:39:18 +0100
rfc2822	Fri, 13 Dec 2024 09:39:18 +0100
millis	1734079158864
unix	1734079158.864
seconds	1734079158.864
my_template	13__12__2024

Tokens

Tokens are useful for formatting and parsing, you can use the following tokens here