vue-luxon

library0.10.0jsnpmunverified

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.

web-framework serialization

npm install vue-luxon

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-LUXON

vue-luxon

web-frameworkjavascriptv0.10.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueLuxon

✓ import VueLuxon from 'vue-luxon';

✗ import { VueLuxon } from 'vue-luxon';

VueLuxon is the default export for the plugin. It's then installed globally via Vue.use().

$luxon

✓ this.$luxon('2020-10-05T14:48:00.000Z', 'dd-MM-yyyy')

✗ Vue.$luxon('2020-10-05T14:48:00.000Z')

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)

✓ {{ dateTimeString | luxon('full') }}

✗ {{ dateTimeString | luxonFormat('full') }}

The plugin registers a global filter named `luxon` for use directly in templates.

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> Original string: <code>{{ dateTimeString }}</code> Formatted using $luxon method (default settings, en-GB): {{ $luxon(dateTimeString) }} Formatted using $luxon method (custom output 'short', local zone): {{ $luxon(anotherDateTime, { output: 'short', output: { zone: 'local' } }) }} Formatted using luxon filter (default settings): {{ anotherDateTime | luxon }} Formatted using luxon filter (custom output 'yyyy/MM/dd'): {{ anotherDateTime | luxon('yyyy/MM/dd') }} Relative time ('2024-03-01' relative to now): {{ $luxon('2024-03-01', 'relative') }} Current date/time (with custom input/output): {{ $luxon("2024-04-21 16:30", { input: { format: "yyyy-MM-dd HH:mm" }, output: "MMMM dd, yyyy 'at' HH:mm" }) }} </div> `, mounted() { console.log("Mounted, checking $luxon directly:", this.$luxon(this.dateTimeString)); } });

Debug

Known issues

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`.

affects: >=0.2.7

gotchaThe 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`.

affects: >=0.2.7

gotchaBy 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' } })`.

affects: >=0.2.7

deprecatedIn `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`.

affects: >=0.10.0

Errors

Common errors & fixes

TypeError: this.$luxon is not a function

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.

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)

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)`).

Upgrade

Version history

0.10.0latest on npm

Audit

Dependencies

vuerequiredRequired for Vue.js plugin functionality. Specifically supports Vue 2.x.

luxonrequiredCore date/time library used for all formatting and parsing operations. Must be installed separately.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/casbloem/vue-luxon ↗

packagehttps://www.npmjs.com/package/vue-luxon ↗

homepagehttps://packages.cblm.nl/vue-luxon ↗