Why is moment js not working in mounted vue component?

Question

When I put moment on the method like this:

<template> 
    ...
</template>
<script>
    export default{
        ...
        methods:{
            ...
            add(event){
                let current = moment()                  
            }
        }
    }
</script>

and then call the add method, it works without error.

But if I put moment on the mounted like this:

mounted(){
   let currentAt = moment()   
}

it does not work. It returns the following error:

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

How can I solve this?

Answer 1

Since you are using .vue files, I am assuming you are using the vue-loader or some other loader within the webpack ecosystem. If you are, then you can do something like the following:

<script>
 export default{
    import moment from 'moment'
    ...
    methods:{
        ...
        add(event){
            let current = moment()                  
        }
    }
}
</script>

Then, just make sure you either execute yarn add moment or npm i -s moment.

Answer 2

If you make a bundle, at the beginning of script, you need to import moment from 'moment'.

If you import the files in your HTML, put a script tag in the HTML:
<script src="moment.js"></script>.