Nuxt에 날짜 형식 필터 추가하기

NuxtJS는 상태 관리 및 라우팅이 내장된 독단적인 VueJS이기 때문에 템플릿에 대한 필터를 작성하는 것은 하나의 캐치를 제외하고 Nuxt와 Vue에서 동일합니다. 지금은 구성 요소 내부의 날짜 포맷터부터 시작하겠습니다. 구성 요소 스크립트 태그 내에서 extends 메서드에 filters 속성을 가진 옵션 개체를 제공합니다. 필터는 객체 리터럴이 됩니다. 속성 이름은 구성 요소 내의 필터 이름이 됩니다. 특별히 멋진 형식을 염두에 두지 않았으므로 이 필터를 "formatDate"라고 부르겠습니다. 약간의 인터넷 검색에서 내장 Intl.DateTimeFormat 을 찾았습니다. 이것이 바로 우리에게 필요한 것 같습니다. 언어별 형식과 시간대를 처리하는 것 같습니다. 아직까지는 별로 필요없고 영어로만 작성해서 mm/dd/yyyy 보는게 익숙합니다. 지금은 그것으로 충분하다고 생각합니다.

import Vue from "vue";
export default Vue.extend({
  filters: {
    formatDate: (date: Date) =>
      Intl.DateTimeFormat("us-EN").format(date),
  },
});

한 가지 걸림돌은 내가 Nuxt 콘텐츠를 사용하고 있고 마크다운 파일이 생성된 시점을 기준으로 모듈이 제공하는 createdAt 문자열을 표시하고 싶다는 것입니다. createdAt는 문자열 형식으로 날짜를 반환하므로 직접 처리하려면 필터를 업데이트해야 합니다.

import Vue from "vue";
export default Vue.extend({
  filters: {
    formatDate: (dateStr: string) =>
      Intl.DateTimeFormat("us-EN").format(new Date(dateStr)),
  },
});

템플릿에서 테스트하면 제대로 작동하는 것 같습니다.

<template>
  <div>
    Date: {{ post.createdAt | formatDate }}
  <div>
</template>

이제 이 필터가 꽤 유용해 보입니다. 나는 우리가 이것을 많이 필요로 할 것이라고 생각한다.
이 필터를 모든 사용자가 사용할 수 있도록 해야 합니다.
템플릿.

일반 Vue에서는 다음과 같이 Vue에 필터를 등록할 수 있습니다.

Vue.filter("formatDate", (dateStr: string) =>
  Intl.DateTimeFormat("us-EN").format(new Date(dateStr))
);

실제로 Nuxt에서도 동일하지만 필터를nuxt.config.ts 파일에 등록된 플러그인입니다.
/plugins 디렉터리에 format-date.ts 라는 파일을 만듭니다. 우리는 "플러그인"
루트 VueJS 앱이 인스턴스화되기 전에 실행됩니다.

import Vue from "vue";

Vue.filter("formatDate", (dateStr: string) =>
  Intl.DateTimeFormat("us-EN").format(new Date(dateStr))
);

이전에 렌더링된 페이지를 확인하면 페이지가 새로고침된 후에도 필터가 계속 작동해야 합니다.