Vue Luxon Plugin

0.10.0 · maintenance · verified Tue Apr 21

Vue Luxon is a plugin for Vue.js (specifically Vue 2) that simplifies date and time formatting and parsing using the Luxon library. It provides a convenient `$luxon` instance method and a `luxon` filter, allowing developers to easily display and manipulate date/time strings within their Vue applications. The current stable version is `0.10.0`. Its release cadence appears infrequent, with significant gaps between updates. Key differentiators include its tight integration with Vue's reactivity system and templating, allowing for simple filter and method usage, and leveraging Luxon's modern, immutable API as an alternative to older libraries like Moment.js. It offers extensive configuration options for input/output formats, timezones, and locales directly within Vue's plugin installation and per-usage.

Common errors

```
TypeError: this.$luxon is not a function
```
cause The `vue-luxon` plugin was not properly installed on the Vue instance, or you are attempting to use it in a Vue 3 application where it is not compatible.

fix Ensure `import VueLuxon from 'vue-luxon'; Vue.use(VueLuxon);` is called before your Vue app is initialized. If using Vue 3, migrate to a compatible Luxon integration or direct Luxon usage.
```
Could not find a declaration file for module 'luxon'. 'path-to-module/luxon.js' implicitly has an 'any' type.
```
cause When using TypeScript, the type definitions for Luxon are not installed.

fix Install Luxon's type definitions: `npm install --save-dev @types/luxon`.
```
Vue.use is not a function (in Vue 3)
```
cause You are attempting to use `Vue.use()` with Vue 3. In Vue 3, `Vue.use` is called on the application instance (e.g., `app.use()`), not the global Vue constructor.

fix This specific plugin (`vue-luxon`) is for Vue 2. If you must use Vue 3, consider a different approach for Luxon integration, as `vue-luxon` is incompatible. For general Vue 3 plugin usage, use `app.use(Plugin)` after creating your app instance (`const app = createApp(App)`).

Warnings

breaking `vue-luxon` is designed exclusively for Vue 2. It is not compatible with Vue 3 due to breaking changes in Vue's plugin API and global properties.
Fix: For Vue 3 projects, consider using a Vue 3-compatible Luxon integration library like `vue-lux` or implementing Luxon directly using `app.config.globalProperties` in Vue 3's `main.js`.
gotcha The Luxon library, which `vue-luxon` wraps, must be installed as a separate dependency (`npm install luxon`). `vue-luxon` does not bundle Luxon itself.
Fix: Ensure `luxon` is included in your project dependencies: `npm install luxon`.
gotcha By default, `vue-luxon` expects input datetime strings to be in UTC timezone and ISO format. Output is based on the client's locale. This can lead to unexpected results if input data deviates from these defaults without explicit configuration.
Fix: Configure `input` and `output` settings during plugin installation or per-usage to match your application's specific date formats and timezones. For example, `Vue.use(VueLuxon, { input: { zone: 'local', format: 'yyyy-MM-dd' } })`.
deprecated In `0.10.0`, the `output.lang` setting was changed to `output.locale`. Using `output.lang` will no longer function as intended.
Fix: Update your configuration to use `output.locale` instead of `output.lang`.

Install

npm install vue-luxon npm
yarn add vue-luxon yarn
pnpm add vue-luxon pnpm

Imports

VueLuxon
wrong:
```
import { VueLuxon } from 'vue-luxon';
```
correct:
```
import VueLuxon from 'vue-luxon';
```
VueLuxon is the default export for the plugin. It's then installed globally via Vue.use().
$luxon
wrong:
```
Vue.$luxon('2020-10-05T14:48:00.000Z')
```
correct:
```
this.$luxon('2020-10-05T14:48:00.000Z', 'dd-MM-yyyy')
```
The `$luxon` method is added to the Vue instance prototype and is accessed via `this` within components. It is not a static property of the Vue constructor.
luxon (filter)
wrong:
```
{{ dateTimeString | luxonFormat('full') }}
```
correct:
```
{{ dateTimeString | luxon('full') }}
```
The plugin registers a global filter named `luxon` for use directly in templates.

Quickstart

This quickstart demonstrates how to install `vue-luxon` as a Vue 2 plugin, configure global default settings, and use both the `$luxon` instance method and the `luxon` filter for various date and time formatting tasks, including custom formats and relative time. It assumes Luxon is also installed.

import Vue from 'vue';
import VueLuxon from 'vue-luxon';
import { DateTime } from 'luxon'; // Luxon itself must be available

// Install the plugin with custom default settings
Vue.use(VueLuxon, {
  input: {
    zone: 'America/New_York',
    format: 'yyyy-MM-dd HH:mm'
  },
  output: {
    format: 'full',
    locale: 'en-GB'
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      dateTimeString: '2023-01-15 10:30',
      anotherDateTime: '2024-03-20T14:00:00.000Z',
      currentLuxonVersion: DateTime.version
    };
  },
  template: `
    <div id="app">
      <h2>Vue Luxon Example (Luxon v{{ currentLuxonVersion }})</h2>
      <p>Original string: <code>{{ dateTimeString }}</code></p>
      <p>Formatted using $luxon method (default settings, en-GB): <strong>{{ $luxon(dateTimeString) }}</strong></p>
      <p>Formatted using $luxon method (custom output 'short', local zone): <strong>{{ $luxon(anotherDateTime, { output: 'short', output: { zone: 'local' } }) }}</strong></p>
      <p>Formatted using luxon filter (default settings): <strong>{{ anotherDateTime | luxon }}</strong></p>
      <p>Formatted using luxon filter (custom output 'yyyy/MM/dd'): <strong>{{ anotherDateTime | luxon('yyyy/MM/dd') }}</strong></p>
      <p>Relative time ('2024-03-01' relative to now): <strong>{{ $luxon('2024-03-01', 'relative') }}</strong></p>
      <p>Current date/time (with custom input/output): <strong>{{ $luxon("2024-04-21 16:30", { input: { format: "yyyy-MM-dd HH:mm" }, output: "MMMM dd, yyyy 'at' HH:mm" }) }}</strong></p>
    </div>
  `,
  mounted() {
    console.log("Mounted, checking $luxon directly:", this.$luxon(this.dateTimeString));
  }
});

view raw JSON →