Day.js Nuxt 模組
Moment.js 的快速 2kB 替代品，具有相同的現代 API
Day.js Nuxt 模組，支援 v3
功能
- ⛰ 支援 Nuxt 3
- 🚠 啟用任何可用的外掛或語言環境
- 🌲 指定預設語言環境和時區
快速設定
- 將
dayjs-nuxt依賴項新增到你的專案
npx nuxi@latest module add dayjs
- 將
dayjs-nuxt新增到nuxt.config.ts的modules部分
export default defineNuxtConfig({
modules: [
'dayjs-nuxt'
]
})
基本用法
你可以使用提供的 $dayjs 在模板中訪問 Day.js。
<template>
<div>
<time :datetime="$dayjs('2023-01-01').utc().toString()"> {{ date }} </time>
</div>
</template>
可組合項
你可以使用 useDayjs 可組合函式在任何地方訪問 Day.js。
<script setup>
import { useDayjs } from '#dayjs' // not need if you are using auto import
const dayjs = useDayjs()
dayjs.locale('fr')
dayjs.extend(...)
</script>
配置
你可以指定任意數量的語言環境、外掛，設定預設語言環境和設定預設時區。
export default defineNuxtConfig({
modules: ['dayjs-nuxt'],
dayjs: {
locales: ['en', 'fr'],
plugins: ['relativeTime', 'utc', 'timezone'],
defaultLocale: 'en',
defaultTimezone: 'America/New_York',
}
})
預設情況下，我們包含 relativeTime 和 utc 外掛，並始終匯入 updateLocale。
外部外掛
export default defineNuxtConfig({
modules: ['dayjs-nuxt'],
dayjs: {
...
externalPlugins: [{
name: 'dayjsBusinessDays',
package: 'dayjs-business-days2',
option: {
holidays: [`2023-12-26`],
holidayFormat: `YYYY-MM-DD`,
}
}]
...
}
})
可選的 defaultLocale 自定義
除了在 defaultLocale: 中使用語言環境字串，你還可以定義一個帶有自定義語言環境的陣列。有關更多資訊，請參閱 dayjs 自定義。
這是一個 relativeTime 配置示例，讓我們建立一個 咕嚕 能理解的配置。
export default defineNuxtConfig({
modules: ['dayjs-nuxt'],
dayjs: {
...
defaultLocale: ['en', {
relativeTime: {
future: "in %s",
past: "%s ago",
s: 'a few secondses',
m: "a minute",
mm: "%d minuteses",
h: "an hour",
hh: "%d hourses",
d: "a day",
dd: "%d dayses",
M: "a month",
MM: "%d monthseses",
y: "a year",
yy: "%d yearseses"
}
}]
...
}
})
開發
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release