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