Configuration

Nuxt Luxon provides various configuration options to customize its behavior. These options can be set in your nuxt.config.ts file.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-luxon'],
  luxon: {
    input: {}, // Default input options
    output: {}, // Default output options
    templates: {}, // Custom templates
  }
})

Input

Control how string dates are parsed by default:

luxon: {
  input: {
    zone: 'utc', // Default timezone for parsing dates
    format: 'iso'      // Default format string for parsing dates
  }
}

Option	Type	Description
zone	string	Default timezone to use when parsing dates. Can be a string like 'America/New_York'
format	string	Default format string to use when parsing dates.

Output Options

Configure how dates are displayed by default:

luxon: {
  output: {
    zone: 'local',       // Timezone for output
    locale: 'client',     // Locale for formatting
    format: 'short',      // Default format string
    relative: {...},      // See below for options
    iso: {...},           // See below for options
    sql: {...},           // See below for options
  }
}

Option	Type	Description
zone	string	Timezone to use for formatted output. Can be a string like 'UTC'
locale	string	Locale to use for formatting (e.g., 'en-US', 'fr-FR').
format	string | DateTimeFormatOptions | Intl.DateTimeFormatOptions	Format string or options object for date formatting.
relative	ToRelativeOptions	Options for relative time formatting. See Luxon documentation
sql	ToSQLOptions	Options for SQL date formatting. See Luxon documentation
iso	ToISOTimeOptions	Options for ISO date formatting. See Luxon documentation

Templates

Templates let you define reusable date formatting configurations. These can be used for both parsing and formatting dates across your application.

luxon: {
  templates: {
    // Define your custom templates
    userDate: {
      zone: 'local',
      format: 'dd MM yyyy',
    },
    serverAMS: {
      zone: 'Europe/Amsterdam',
      format: 'dd-MM-yyyy HH:mm:ss',
    },
    client: {
      zone: 'local',
      format: 'short',
    },
    // You can also override built-in templates
    full: { 
      format: 'EEEE, MMMM d, yyyy h:mm a',
      locale: 'en-US'
    }
  }
}

Each template accepts the same options as the output configuration. Templates can be used in both the $luxon/$lf and $lp functions:

<script setup>
const { $luxon, $lp } = useLuxon()

// Parse a date using a template
const parsedDate = $lp('15 05 2025', 'userDate')

// Format a date using a template
const amsterdamTime = $luxon(new Date(), 'serverAMS')
</script>

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
date	10/14/1983