I recently used moment function of js to vue. But it's not working. It is saying that moment is not defined. I looked for a solution in here but any of them didn't work for me. How can I use moment in nuxt?

<script>
import moment from "moment";
export default {
...
puted:{
    calendarWeekdays:function(){
        var n=moment.weekdays();
        return n.push(n.shift()),n;
    },
...

And the error I got is:

ERROR in ./ponents/DatePicker.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./ponents/DatePicker.vue?vue&type=script&lang=js&)

Do I have to install moment npm?

I recently used moment function of js to vue. But it's not working. It is saying that moment is not defined. I looked for a solution in here but any of them didn't work for me. How can I use moment in nuxt?

<script>
import moment from "moment";
export default {
...
puted:{
    calendarWeekdays:function(){
        var n=moment.weekdays();
        return n.push(n.shift()),n;
    },
...

And the error I got is:

ERROR in ./ponents/DatePicker.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./ponents/DatePicker.vue?vue&type=script&lang=js&)

Do I have to install moment npm?

• javascript
• vue.js
• nuxt.js

• yould you show us the code how you tried to make it work? – Ilijanovic Commented Apr 17, 2020 at 5:45
• I added the code for reference – Dev Play Commented Apr 17, 2020 at 5:48
• and what error does appear? – Ilijanovic Commented Apr 17, 2020 at 5:49
• I wrote error that I got – Dev Play Commented Apr 17, 2020 at 5:52
• ` return n.push(n.shift()),n;` thats invalid syntax – Ilijanovic Commented Apr 17, 2020 at 5:55

3 Answers 3

From the error message you got, you would have some settings issues.
Please follow these steps:

• Install moment module:

  yarn add --dev @nuxtjs/moment # or npm install --save-dev @nuxtjs/moment
  

• Edit nuxt.config.js file and declare the module there:

  export default {
    buildModules: [
      '@nuxtjs/moment'
    ]
  }
  

At this point, it is ready to be used:

<template>
  <div>
    {{ weekdays }}
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      weekdays: moment.weekdays()
    }
  }
}
</script>

Screenshot of the result:

You have to use moment as a function, like this "moment()". So your code will be,

<script>
import moment from "moment";
export default {
...
puted:{
    calendarWeekdays:function(){
        var n = moment().weekdays();
        return n.push(n.shift()),n;
    },
...

You probably need to import the library like this:

import * as moment from 'moment';

You can find more detailed information in the official docs.