What are the proper steps to include and use moment in Vuejs?

Question

I'm trying to call moment() in my Vuejs application, I've tried declaring it like so :

methods: {
  moment: function () {
    return moment();
  }
},

and tried to my test it like so :

beforeMount() {
    console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
},

I kept getting

[Vue warn]: Error in beforeMount hook: "ReferenceError: moment is not defined"

Do I need to add a moment to my package.json and run yarn install?

I would like to make it as light as possible since I will only need to access moment() only one page of my application, I rather not load them on all pages.

Please kindly suggest

Well, if you will use a library just once on just one page, you may not need to use it at all. And you should be importing moment before the component definition. — Eldar
– Eldar, Commented Dec 21, 2021 at 17:30

Boussadjra Brahim · Accepted Answer · 2021-12-21 17:29:46Z

2

First you should install using the following commande :

npm i moment --save

then in your component import it and use it like :


import moment from 'moment/moment';

export default{

...
beforeMount() {
    console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
}

}

answered Dec 21, 2021 at 17:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bourbia Brahim · Accepted Answer · 2021-12-22 13:51:14Z

Since moment is a deprecated lib (due to mutablility) also huge library in term of size , it's recommended to use other modern library sush dayjs, which is only a 2kB fast library that offers same functionality as moment

You could install it

npm install dayjs --save

then in your project (use specific plugin days js to show your specific format Do )

import advancedFormat from 'dayjs/plugin/advancedFormat';

export default{

...
beforeMount() {
    dayjs.extend(advancedFormat) // use plugin
    console.log(dayjs().format('MMMM Do YYYY, h:mm:ss a'))
}

See sample snnipet in pure js :

dayjs.extend(dayjs_plugin_advancedFormat);

console.log(dayjs().format('MMMM Do YYYY, h:mm:ss a') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/advancedFormat.min.js"></script>

Collectives™ on Stack Overflow

What are the proper steps to include and use moment in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related