https://github.com/fumeapp/dayjs
Nuxt V3 module for Day.js
https://github.com/fumeapp/dayjs
dayjs javascript nuxt nuxt-module
Last synced: about 1 year ago
JSON representation
Nuxt V3 module for Day.js
- Host: GitHub
- URL: https://github.com/fumeapp/dayjs
- Owner: fumeapp
- License: apache-2.0
- Created: 2023-04-29T08:14:17.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-11T16:22:13.000Z (over 1 year ago)
- Last Synced: 2025-04-04T06:32:01.611Z (about 1 year ago)
- Topics: dayjs, javascript, nuxt, nuxt-module
- Language: TypeScript
- Homepage:
- Size: 1.03 MB
- Stars: 117
- Watchers: 3
- Forks: 12
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://day.js.org/) Nuxt Module supporting v3
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/fumeapp/dayjs?file=playground%2Fapp.vue)
## 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()` and `dayjs()` composables to access Day.js anywhere.
```vue
import { useDayjs, dayjs } from '#dayjs' // not need if you are using auto import
// access for dayjs globals
useDayjs().locale('fr')
useDayjs().extend(...)
// access for dayjs instance
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
```
## 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](https://day.js.org/docs/en/customization/customization) for more information.
Here is an example for a relativeTime configuration, lets create one that [Gollum](https://en.wiktionary.org/wiki/hobbitses) 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