chantouchsek / dayjs

Nuxt V3 module for Day.js

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

# Using pnpm
pnpm add -D dayjs-nuxt

# Using yarn
yarn add --dev dayjs-nuxt

# Using npm
npm install --save-dev dayjs-nuxt

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