Vuejs(Nuxtjs) 날짜포맷 filter 사용법(Date format filter)

Nuxtjs에서 날짜를 그냥 뿌려주면 다음과 같은 형식으로 나타나게 됩니다.

2022-05-13T22:55:12.000Z

이것을 다음과 같은 형식으로 보여주는 방법에 대해 알아보겠습니다.

2022/05/14

순서는 다음과 같습니다.

• nuxt.config.js에 필터 추가
• plugin 폴더에 filter.js 파일 생성
• vue에서 필터 사용

 

nuxt.config.js에 필터 추가

nuxt.config.js 파일에서 plugins: [] 에 다음 코드를 추가합니다.

plugins: [
   '~/plugins/filter.js',
],

 

plugin 폴더에 filter.js 파일 생성

plugin 폴더에 filter.js 파일을 생성하고 다음 코드를 입력하고 저장합니다.

import Vue from 'vue';
import moment from 'moment';

Vue.filter('formatDate', (value) => {
    return moment(String(value)).format('YYYY/MM/DD');
})

 

vue에서 필터 사용

.vue 파일에서 다음과 같이 입력합니다.

{{createdAt | formatDate}}

createdAt 이라는 필드의 값을 formatDate라는 필터를 적용하라는 뜻입니다.
이렇게 하면 다음과 같은 결과가 나오는 걸 확인 할 수 있습니다.

2022/05/14