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

1npx nuxi@latest module add dayjs

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

1export default defineNuxtConfig({
2  modules: [
3    'dayjs-nuxt'
4  ]
5})

Basic Usage

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

1<template>
2  <div>
3    <time :datetime="$dayjs('2023-01-01').utc().toString()"> {{ date }} </time>
4  </div>
5</template>

Composables

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

1<script setup>
2  import { useDayjs } from '#dayjs' // not need if you are using auto import
3  const dayjs = useDayjs()
4  dayjs.locale('fr')
5  dayjs.extend(...)
6</script>

Configuration

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

1export default defineNuxtConfig({
2  modules: ['dayjs-nuxt'],
3  dayjs: {
4    locales: ['en', 'fr'],
5    plugins: ['relativeTime', 'utc', 'timezone'],
6    defaultLocale: 'en',
7    defaultTimezone: 'America/New_York',
8  }
9})

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

External Plugins

1export default defineNuxtConfig({
2  modules: ['dayjs-nuxt'],
3  dayjs: {
4    ...
5    externalPlugins: [{
6      name: 'dayjsBusinessDays',
7      package: 'dayjs-business-days2',
8      option: {
9        holidays: [`2023-12-26`],
10        holidayFormat: `YYYY-MM-DD`,
11      }
12    }]
13    ...
14  }
15})

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:

1export default defineNuxtConfig({
2  modules: ['dayjs-nuxt'],
3  dayjs: {
4    ...
5    defaultLocale: ['en', {
6      relativeTime: {
7        future: "in %s",
8        past: "%s ago",
9        s: 'a few secondses',
10        m: "a minute",
11        mm: "%d minuteses",
12        h: "an hour",
13        hh: "%d hourses",
14        d: "a day",
15        dd: "%d dayses",
16        M: "a month",
17        MM: "%d monthseses",
18        y: "a year",
19        yy: "%d yearseses"
20      }
21    }]
22    ...
23  }
24})

Development

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build
12
13# Run ESLint
14npm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release