Composition APIはthisを潰す

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

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