Day.js Nuxt Module

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

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

npx nuxi@latest module add dayjs

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

exportdefaultdefineNuxtConfig({modules: ['dayjs-nuxt']})

Basic Usage

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>

Composables

You can use the useDayjs() and dayjs() composables to access Day.js anywhere.

<script setup>import { useDayjs, dayjs } from'#dayjs'// not need if you are using auto import// access for dayjs globalsuseDayjs().locale('fr')useDayjs().extend(...)// access for dayjs instanceconsole.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))</script>

Configuration

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

exportdefaultdefineNuxtConfig({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

exportdefaultdefineNuxtConfig({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:

exportdefaultdefineNuxtConfig({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

# 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