Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lack of compatibility with Nuxt 3 #82

Open
DamianGlowala opened this issue Oct 14, 2021 · 5 comments
Open

Lack of compatibility with Nuxt 3 #82

DamianGlowala opened this issue Oct 14, 2021 · 5 comments

Comments

@DamianGlowala
Copy link

DamianGlowala commented Oct 14, 2021

Are there any plans for making this module compatible with Nuxt 3?

image

image

@MattFaz
Copy link

MattFaz commented Jun 1, 2022

Is there any intention of updating this for nuxt3?

@sokphengkean
Copy link

I've tried this and it works.

yarn add moment

nuxt.config.ts

vite: { // @ts-ignore ssr: { noExternal: ["moment"], }, }

Using

import moment from 'moment'; console.log("Now: ", moment().format('YYYY-MM-DD HH:mm:ss'));

@adnane-ka
Copy link

adnane-ka commented Sep 19, 2023

For those who are still facing this problem, here's a short handed approach for implementing momentJs in Nuxt 3:

  1. Install moment using npm i moment.
  2. Create a new plugin file under your plugins directory and name them moment.js.
  3. Inside that file put the code bellow:
import moment from "moment";

export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            relative:(d) => moment().from(d)
        }
    }
})
  1. inside your components & pages it can be used as bellow:
<template>
      <h1>{{ $relative(Date.now()) }}</h1>
</template>

@BorisKamp
Copy link

BorisKamp commented Jan 11, 2024

For those who are still facing this problem, here's a short handed approach for implementing momentJs in Nuxt 3:

  1. Install moment using npm i moment.
  2. Create a new plugin file under your plugins directory and name them moment.js.
  3. Inside that file put the code bellow:
import moment from "moment";

export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            relative:(d) => moment().from(d)
        }
    }
})
  1. inside your components & pages it can be used as bellow:
<template>
      <h1>{{ $relative(Date.now()) }}</h1>
</template>

How can we enable moment timezone module with this approach? I have this now:

import moment from 'moment'

export default defineNuxtPlugin(() => {
  moment.locale('nl')
  moment.tz.setDefault('Europe/Amsterdam')
  return {
    provide: {
      moment,
    },
  }
})

but it gives an error Cannot read properties of undefined (reading 'setDefault').

@BorisKamp
Copy link

How can we enable moment timezone module with this approach?

I found out we just need to replace import moment from 'moment' with import moment from 'moment-timezone'`.

This is moment.ts plugin file now:

import moment from 'moment-timezone'

export default defineNuxtPlugin(() => {
  moment.locale('nl')
  moment.tz.setDefault('Europe/Amsterdam')
  return {
    provide: {
      moment,
    },
  }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants