Skip to content

jeevanya/dayjs

 
 

Repository files navigation

Nuxt Day.js module

Day.js Nuxt Module

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

npm version npm downloads License Nuxt

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

Optional relativeTime customization

You can now specify a custom relativeTime configuration, lets create one Gollum would understand

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    ...
    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

About

Nuxt V3 module for Day.js

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 70.6%
  • Vue 29.4%