How to Use Moment.js with Vuejs?

The Moment.js library can be integrated with Vue.js to simplify date and time manipulation within your Vue components. By importing Moment.js and using its formatting functions, you can easily display and format dates in your application. This integration allows you to use Moment.js's powerful features directly within Vue's reactive data properties and computed properties. In this article, we will learn to use Moment.js with Vuejs.

Steps to Setup Moment.js with Vuejs

Step 1: Create a new Vue.js project

npm create vue@latest

Step 2: Say No to all the options

Step 3: Navigate to the directory

cd <your-project-name>

Project Structure:

Step 4: Install moment.js dependency using the below command:

npm install moment

Updated dependencies:

  "dependencies": {
    "core-js": "^3.8.3",
    "moment": "^2.30.1",
    "vue": "^3.2.13"
  },

Example: In this example, we are using moment.js with Vue.js to display the current date and time in a formatted manner. We import moment into the HelloWorld component and store the current date in the data function. The formattedDate computed property then formats this date using moment.js and displays it in the template.

<!--src/components/HelloWorld.vue-->

<template>
  <div class="hello">
    <h1>Current Date and Time</h1>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'HelloWorld',
  data() {
    return {
      currentDate: moment()
    };
  },
  computed: {
    formattedDate() {
      return this.currentDate.format('MMMM Do YYYY, h:mm:ss a'); 
    }
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

<!--src/App.vue-->

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Run the Project using below command:

npm run serve

Output: