useLux

A composable that provides convenient access to the Luxon date/time formatting ($lux) and parsing ($lp) utilities registered globally in the Nuxt application. It allows for direct formatting/parsing or retrieving the utility functions themselves.

Usage

import { useLux } from '#imports'

// Direct formatting
const formattedDate = useLux(new Date(), 'dd/MM/yyyy') // Returns '25/12/2023' (example)

// Get utility functions
const { $lux, $lp, $lf } = useLux() // $lf is an alias for $lux

const now = new Date()
const displayDate = $lux(now, 'dd/MM/yyyy')
const apiDate = $lux(now, 'yyyy-MM-dd')

const parsedDate = $lp('2023-12-25', 'yyyy-MM-dd') // Returns a Luxon DateTime object

Type Signature

// When value is provided
function useLux(value: any, outputFormat?: string, inputFormat?: string): string;

// When value is not provided
function useLux(): {
  $lux: (value: any, outputFormat?: string, inputFormat?: string) => string;
  $lp: (value: string, inputFormat?: string) => DateTime; // DateTime from Luxon
  $lf: (value: any, outputFormat?: string, inputFormat?: string) => string; // Alias for $lux
};

Parameters

Parameter	Type	Description
value	any	Optional. The date/time value to format (e.g., Date object, ISO string). If provided, the composable directly returns the formatted string.
outputFormat	string	Optional. The desired output format string (Luxon format tokens).
inputFormat	string	Optional. The format string of the input value if it's not a standard format (Luxon format tokens).

Return Value

• If value is provided: Returns the formatted date/time string according to outputFormat.
• If value is not provided: Returns an object containing:
  • $lux: The global Luxon formatting function.
  • $lp: The global Luxon parsing function.
  • $lf: An alias for the $lux function.

Examples

Direct Formatting

<script setup>
import { useLux } from '#imports'

const eventDate = '2024-07-15T10:00:00.000Z'
const displayEventDate = useLux(eventDate, 'DDD') // Format as 'July 15, 2024'
const displayEventTime = useLux(eventDate, 't')   // Format as '10:00 AM'
</script>

<template>
  <p>Event starts on {{ displayEventDate }} at {{ displayEventTime }}</p>
</template>

Using Utility Functions

<script setup>
import { ref, computed } from 'vue'
import { useLux } from '#imports'

const { $lux, $lp } = useLux()
const selectedDate = ref('2024-01-10') // From a date picker (yyyy-MM-dd)

const displaySelectedDate = computed(() => {
  // Parse the date string and then format it for display
  const luxonDate = $lp(selectedDate.value, 'yyyy-MM-dd')
  return $lux(luxonDate, 'DDDD') // Format as 'Wednesday, January 10, 2024'
})

const apiPayload = computed(() => {
  // Format the date for an API request (ISO format)
  return {
    event_date: $lux(selectedDate.value, 'iso', 'yyyy-MM-dd')
  }
})
</script>

<template>
  <div>
    <p>Selected Date: {{ displaySelectedDate }}</p>
    <pre>API Payload: {{ apiPayload }}</pre>
  </div>
</template>

Note: This composable relies on the Nuxt Luxon plugin being correctly configured and providing the $lux and $lp global properties.

Source Code