Fast 2kB alternative to Moment.js with the same modern API
Day.js Nuxt Module supporting v3
- ⛰ Nuxt 3 ready
- 🚠 Activate any plugin or locale available
- 🌲 Specify default locales and timezones
- Add
@mkody/dayjs-nuxtas a dependency to your project
npm install --save-dev @mkody/dayjs-nuxt
# or
pnpm add -D @mkody/dayjs-nuxt
# or
yarn add -D @mkody/dayjs-nuxt- Add
@mkody/dayjs-nuxtto themodulessection ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'@mkody/dayjs-nuxt'
]
})You can use the provided $dayjs to access Day.js in template.
<template>
<div>
<time :datetime="$dayjs('2023-01-01').utc().toString()"> {{ date }} </time>
</div>
</template>You can use the useDayjs composable to access Day.js anywhere.
<script setup>
import { useDayjs } from '#dayjs' // not need if you are using auto import
const dayjs = useDayjs()
dayjs.locale('fr')
dayjs.extend(...)
</script>You can specify any amount of locales, plugins, set a default locale, and set a default timezone
export default defineNuxtConfig({
modules: ['@mkody/dayjs-nuxt'],
dayjs: {
locales: ['en', 'fr'],
plugins: ['relativeTime', 'utc', 'timezone'],
defaultLocale: 'en',
defaultTimezone: 'America/New_York',
}
})export default defineNuxtConfig({
modules: ['@mkody/dayjs-nuxt'],
dayjs: {
...
externalPlugins: [{
name: 'dayjsBusinessDays',
package: 'dayjs-business-days2',
option: {
holidays: [`2023-12-26`],
holidayFormat: `YYYY-MM-DD`,
}
}]
...
}
})Instead of a locale string in defaultLocale:, you can define an array with a custom locale. See dayjs customization for more information.
Here is an example for a relativeTime configuration, lets create one that Gollum would understand:
export default defineNuxtConfig({
modules: ['@mkody/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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent