Skip to content

Configuration

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

ts
// 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:

ts
luxon: {
  input: {
    zone: 'utc', // Default timezone for parsing dates
    format: 'iso'      // Default format string for parsing dates
  }
}
OptionTypeDescription
zonestringDefault timezone to use when parsing dates. Can be a string like 'America/New_York'
formatstringDefault format string to use when parsing dates.

Output Options

Configure how dates are displayed by default:

ts
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
  }
}
OptionTypeDescription
zonestringTimezone to use for formatted output. Can be a string like 'UTC'
localestringLocale to use for formatting (e.g., 'en-US', 'fr-FR').
formatstring | DateTimeFormatOptions | Intl.DateTimeFormatOptionsFormat string or options object for date formatting.
relativeToRelativeOptionsOptions for relative time formatting. See Luxon documentation
sqlToSQLOptionsOptions for SQL date formatting. See Luxon documentation
isoToISOTimeOptionsOptions 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.

ts
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:

vue
<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:

formatexample (with locale en_US)
short10/14/1983, 1:30 PM
shorts10/14/1983, 1:30:23 PM
medOct 14, 1983, 1:30 PM
medsOct 14, 1983, 9:30:33 AM
fullOctober 14, 1983, 9:30 AM EDT
fullsOctober 14, 1983, 9:30:33 AM EDT
hugeFriday, October 14, 1983, 9:30 AM Eastern Daylight Time
hugesFriday, October 14, 1983, 9:30:33 AM Eastern Daylight Time
time9:30 AM
times09:30:23 AM
time2409:30
time24s09:30:23
time24longoffset09:30:23 Eastern Daylight Time
date_fullOctober 14, 1983
date_hugeTuesday, October 14, 1983
date_medOct 14, 1983
date_meddFri, Oct 14, 1983
date_short10/14/1983
date10/14/1983

Released under the MIT License.