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

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
# 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: [
'dayjs-nuxt'
]
})

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')
</script>
<template>
<div>
<time :datetime="date.utc()"> {{ date }}</p>
</div>
</template>

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

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