dayjs-nuxt

Day.js module for Nuxt

121K downloads•119 stars•v2.1.11

acidjazz

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

npx nuxi@latest module add dayjs

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 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