Nuxt Day.js module

Day.js Nuxt Module

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

Day.js Nuxt Module supporting v3

Features

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

Quick Setup

Add dayjs-nuxt dependency to your project

# Using pnpmpnpm add -D dayjs-nuxt# Using yarnyarn add --dev dayjs-nuxt# Using npmnpm install --save-dev dayjs-nuxt

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

export default defineNuxtConfig({  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 composable to access Day.js anywhere.

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

Configuration

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, and always import updateLocale

External Plugins

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:

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

# Install dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release