Vue 1.x Moment.js Wrapper

Common errors

• TypeError: this.$moment is not a function

  cause The `vue-momentjs` plugin was not correctly installed via `Vue.use(VueMomentJS, moment);` or Vue is not an active instance.
  fix Ensure `Vue.use(VueMomentJS, moment);` is called before instantiating Vue components and that `moment` is properly imported and passed as an argument.

• Vue.use is not a function (when using Vue 3)

  cause The global `Vue.use` method was removed in Vue 3. Plugin installation is now done on the application instance (e.g., `createApp().use(plugin)`). This package is only compatible with Vue 1.x.
  fix This package is not compatible with Vue 3. You must use a Vue 3 compatible date library and its corresponding plugin or integrate directly.

• Uncaught ReferenceError: moment is not defined

  cause The `moment` library was not imported or made globally available before `vue-momentjs` attempted to use it.
  fix Ensure you have `import moment from 'moment';` at the top of your file and that `moment` is listed as a dependency in your `package.json` and installed.

Warnings

• breaking This package is designed for Vue 1.x and is incompatible with Vue 2.x or Vue 3.x due to significant API changes in newer Vue versions, including the removal of global Vue instance methods for plugin installation in Vue 3.
  Fix: Migrate to a modern date library (e.g., Day.js, Luxon, date-fns) and integrate it with a compatible Vue 2/3 wrapper or a custom composition API setup.
• deprecated The underlying `moment` library is in maintenance mode and not recommended for new projects. It will not receive new features and has known issues with bundle size and object mutability.
  Fix: Avoid using Moment.js in new projects. Consider modern alternatives like Day.js, Luxon, or date-fns, which are actively maintained and designed for modern JavaScript ecosystems.
• gotcha The `vue-momentjs` package itself appears unmaintained, with its last publish date being approximately six years ago. This suggests a lack of support, bug fixes, or security updates.
  Fix: Discontinue use in production for any new development. Existing projects should assess the risk of using unmaintained software and consider migration.

Install

• npm install vue-momentjs npm
• yarn add vue-momentjs yarn
• pnpm add vue-momentjs pnpm

Imports

• VueMomentJS
  wrong:

  import { VueMomentJS } from 'vue-momentjs';

  correct:

  import VueMomentJS from 'vue-momentjs';

  The primary way to import the plugin for ES Modules. It is likely a default export.
• VueMomentJS
  wrong:

  const { VueMomentJS } = require('vue-momentjs');

  correct:

  const VueMomentJS = require('vue-momentjs');

  CommonJS import for Node.js environments. Given the package's age, this might have been the primary method initially.
• $moment

  this.$moment().format('LLL');

  After installation via `Vue.use(VueMomentJS, moment)`, the Moment.js instance is available globally on Vue components as `this.$moment`.

Quickstart

Initializes `vue-momentjs` with Moment.js and demonstrates basic date formatting within a Vue 1.x component.

import Vue from 'vue';
import moment from 'moment';
import VueMomentJS from 'vue-momentjs';

// Install the plugin, passing the Moment.js library instance
Vue.use(VueMomentJS, moment);

// Create a basic Vue component
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue with Moment.js!'
  },
  mounted() {
    // Use this.$moment() to access Moment.js functionalities
    console.log('Current time:', this.$moment().format('MMMM Do YYYY, h:mm:ss a'));
    this.message = `Current time: ${this.$moment().format('MMMM Do YYYY, h:mm:ss a')}`;
  },
  template: `
    <div>
      <h1>{{ message }}</h1>
      <p>Formatted date from instance: {{ this.$moment('2023-01-15').format('dddd, MMMM Do YYYY') }}</p>
    </div>
  `
});

// Ensure you have a div with id='app' in your HTML:
// <div id="app"></div>