!Nuxt Day.js module

Day.js Nuxt Module

> Fast 2kB alternative to Moment.js with the same modern API

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Day.js Nuxt Module supporting v3

- ✨  Release Notes
- 🏀 Online playground

Features

- ⛰  Nuxt 3 ready
- 🚠  Activate any plugin or locale available
- 🌲  Specify default locales and timezones

Quick Setup

1. Add dayjs-nuxt dependency to your project

``bash
npx nuxi@latest module add dayjs
`

2. Add dayjs-nuxt to the modules section of nuxt.config.ts

`js
export default defineNuxtConfig({
modules: [
'dayjs-nuxt'
]
})
`

Basic Usage

You can use the provided $dayjs to access Day.js in template.

`vue

`

Composables

You can use the useDayjs composable to access Day.js anywhere.

`js

`

Configuration

You can specify any amount of locales, plugins, set a default locale, and set a default timezone

`ts
export default defineNuxtConfig({
modules: ['dayjs-nuxt'],
dayjs: {
locales: ['en', 'fr'],
plugins: ['relativeTime', 'utc', 'timezone'],
defaultLocale: 'en',
defaultTimezone: 'America/New_York',
}
})
`

> By default we include the relativeTime and utc plugins, and always import updateLocale

External Plugins

`ts
export default defineNuxtConfig({
modules: ['dayjs-nuxt'],
dayjs: {
...
externalPlugins: [{
name: 'dayjsBusinessDays',
package: 'dayjs-business-days2',
option: {
holidays: [2023-12-26],
holidayFormat: YYYY-MM-DD,
}
}]
...
}
})
`

Optional defaultLocale customization

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:

`ts
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"
}
}]
...
}
})
`

Development

`bash


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
``

[npm-version-src]: https://img.shields.io/npm/v/dayjs-nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/dayjs-nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/dayjs-nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/dayjs-nuxt
[license-src]: https://img.shields.io/npm/l/dayjs-nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/dayjs-nuxt
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com