{"id":15911,"library":"vue-luxon","title":"Vue Luxon Plugin","description":"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.","status":"maintenance","version":"0.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/casbloem/vue-luxon","tags":["javascript","vue","vuejs","luxon","date","datetime","time","moment","momentjs"],"install":[{"cmd":"npm install vue-luxon","lang":"bash","label":"npm"},{"cmd":"yarn add vue-luxon","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-luxon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Vue.js plugin functionality. Specifically supports Vue 2.x.","package":"vue"},{"reason":"Core date/time library used for all formatting and parsing operations. Must be installed separately.","package":"luxon"}],"imports":[{"note":"VueLuxon is the default export for the plugin. It's then installed globally via Vue.use().","wrong":"import { VueLuxon } from 'vue-luxon';","symbol":"VueLuxon","correct":"import VueLuxon from 'vue-luxon';"},{"note":"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.","wrong":"Vue.$luxon('2020-10-05T14:48:00.000Z')","symbol":"$luxon","correct":"this.$luxon('2020-10-05T14:48:00.000Z', 'dd-MM-yyyy')"},{"note":"The plugin registers a global filter named `luxon` for use directly in templates.","wrong":"{{ dateTimeString | luxonFormat('full') }}","symbol":"luxon (filter)","correct":"{{ dateTimeString | luxon('full') }}"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueLuxon from 'vue-luxon';\nimport { DateTime } from 'luxon'; // Luxon itself must be available\n\n// Install the plugin with custom default settings\nVue.use(VueLuxon, {\n input: {\n zone: 'America/New_York',\n format: 'yyyy-MM-dd HH:mm'\n },\n output: {\n format: 'full',\n locale: 'en-GB'\n }\n});\n\nnew Vue({\n el: '#app',\n data() {\n return {\n dateTimeString: '2023-01-15 10:30',\n anotherDateTime: '2024-03-20T14:00:00.000Z',\n currentLuxonVersion: DateTime.version\n };\n },\n template: `\n
\n

Vue Luxon Example (Luxon v{{ currentLuxonVersion }})

\n

Original string: {{ dateTimeString }}

\n

Formatted using $luxon method (default settings, en-GB): {{ $luxon(dateTimeString) }}

\n

Formatted using $luxon method (custom output 'short', local zone): {{ $luxon(anotherDateTime, { output: 'short', output: { zone: 'local' } }) }}

\n

Formatted using luxon filter (default settings): {{ anotherDateTime | luxon }}

\n

Formatted using luxon filter (custom output 'yyyy/MM/dd'): {{ anotherDateTime | luxon('yyyy/MM/dd') }}

\n

Relative time ('2024-03-01' relative to now): {{ $luxon('2024-03-01', 'relative') }}

\n

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\" }) }}

\n
\n `,\n mounted() {\n console.log(\"Mounted, checking $luxon directly:\", this.$luxon(this.dateTimeString));\n }\n});","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"`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.","severity":"breaking","affected_versions":">=0.2.7"},{"fix":"Ensure `luxon` is included in your project dependencies: `npm install luxon`.","message":"The Luxon library, which `vue-luxon` wraps, must be installed as a separate dependency (`npm install luxon`). `vue-luxon` does not bundle Luxon itself.","severity":"gotcha","affected_versions":">=0.2.7"},{"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' } })`.","message":"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.","severity":"gotcha","affected_versions":">=0.2.7"},{"fix":"Update your configuration to use `output.locale` instead of `output.lang`.","message":"In `0.10.0`, the `output.lang` setting was changed to `output.locale`. Using `output.lang` will no longer function as intended.","severity":"deprecated","affected_versions":">=0.10.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: this.$luxon is not a function"},{"fix":"Install Luxon's type definitions: `npm install --save-dev @types/luxon`.","cause":"When using TypeScript, the type definitions for Luxon are not installed.","error":"Could not find a declaration file for module 'luxon'. 'path-to-module/luxon.js' implicitly has an 'any' type."},{"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)`).","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.","error":"Vue.use is not a function (in Vue 3)"}],"ecosystem":"npm"}