LoginSignup
5

More than 3 years have passed since last update.

NuxtのCompositionAPIでdayjsをぶっこむ

Last updated at Posted at 2019-11-24

Composition APIはthisを潰す

  1. dayjsインストール
  2. pluginsにdayjsを追加
  3. TypeScript用の設定
  4. 使い方

dayjsインストール

$ yarn add dayjs

pluginsにdayjsを追加

理由は後述しますが,plugins/dayjs/dayjs.jsとしています。
一個専用のディレクトリを切ります。

plugins/dayjs/dayjs.js
import Vue from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/ja'

import relativeTime from 'dayjs/plugin/relativeTime'
import LocalizedFormat from 'dayjs/plugin/localizedFormat'
import weekday from 'dayjs/plugin/weekday'

dayjs.locale('ja')
dayjs.extend(weekday)
dayjs.extend(relativeTime)
dayjs.extend(LocalizedFormat)
Vue.prototype.$dayjs = dayjs

nuxt.cofig.js
plugins: ['@/plugins/dayjs/dayjs']

TypeScript用の設定追加

@/plugins/dayjs/dayjs.d.ts
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

import dayjs from 'dayjs'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $dayjs(date?: dayjs.ConfigType, option?: dayjs.OptionType, locale?: string): dayjs.Dayjs;
  }
}
declare module 'dayjs' {
  interface Dayjs {
    weekday(): number

    weekday(value: number): Dayjs
  }
}
tsconfig.json
  "files": [
    "plugins/dayjs/dayjs.d.ts"
  ]

この型定義ファイルを書くときに,@/dayjs.d.tsって感じで置くと,pluginのdayjsをうまく読み込んでくれなかった。plugins下だと読み込んでくれるので,型定義ファイルとpluginファイルを機能ごとにひとまとめにする構成にした。

使い方

component.vue
<script lang="ts">
import { createComponent, reactive } from '@vue/composition-api'

export default createComponent({
  setup (props: {}, { root: { $dayjs } }) {
    const state = reactive({
      now: $dayjs().format('MM月DD日 (ddd)')
    })
    return {
      state
    }
  }
})
</script>

下記でもいけますが,上記だと省略できていい感じです。

setup (props: {}, context) {
    const state = reactive({
      now: context.root.$dayjs().format('MM月DD日 (ddd)')
    })
    return {
      state
    }
  }

参考

僕はとりあえず dayjs !

SETUP VUEX IN VUE.JS 3 COMPOSITION API WITH EXAMPLE

Some documentation/guidance to Typescript and using dayjs as a Vue.js plugin #611

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5