Nuxt Day.js module

Day.js Nuxt Module

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

npm versionnpm downloadsLicenseNuxt

Day.js Nuxt Module supporting v3


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

Quick Setup

  1. Add dayjs-nuxt dependency to your project
# Using pnpm
pnpm add -D dayjs-nuxt

# Using yarn
yarn add --dev dayjs-nuxt

# Using npm
npm install --save-dev dayjs-nuxt
  1. Add dayjs-nuxt to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [

Basic Usage

You can use the provided composables to access Day.js anywhere.

<script lang="ts" setup>
const dayjs = useDayjs()
const date = dayjs('2023-01-01')

    <time :datetime="date.utc().toString()"> {{ date }} </time>


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

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

More extending

For example, is need to add an external plugin

// plugins/dayjs.plugin.ts
import dayjsBusinessTime from 'dayjs-business-time'

export default defineNuxtPlugin(() => {
  const dayjs = useDayjs()

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:

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    locales: ['en', 'fr'],
    plugins: ['relativeTime'],
    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