Nuxt Day.js module

Day.js Nuxt モジュール

同じモダンな API を持つ、Moment.js の高速な 2kB の代替

Day.js Nuxt モジュール（v3対応）

機能

⛰ Nuxt 3 対応
🚠 利用可能な任意のプラグインまたはロケールを有効化
🌲 デフォルトのロケールとタイムゾーンを指定

クイックセットアップ

プロジェクトに dayjs-nuxt 依存関係を追加

npx nuxi@latest module add dayjs

nuxt.config.ts の modules セクションに dayjs-nuxt を追加

export default defineNuxtConfig({
  modules: [
    'dayjs-nuxt'
  ]
})

基本使用法

テンプレートで Day.js にアクセスするには、提供されている $dayjs を使用できます。

<template>
  <div>
    <time :datetime="$dayjs('2023-01-01').utc().toString()"> {{ date }} </time>
  </div>
</template>

コンポーザブル

どこからでも Day.js にアクセスするには、useDayjs コンポーザブルを使用できます。

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

設定

任意の数のロケール、プラグインを指定したり、デフォルトのロケールを設定したり、デフォルトのタイムゾーンを設定したりできます。

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    locales: ['en', 'fr'],
    plugins: ['relativeTime', 'utc', 'timezone'],
    defaultLocale: 'en',
    defaultTimezone: 'America/New_York',
  }
})

デフォルトでは、relativeTime および utc プラグインが含まれており、常に updateLocale をインポートします。

外部プラグイン

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    ...
    externalPlugins: [{
      name: 'dayjsBusinessDays',
      package: 'dayjs-business-days2',
      option: {
        holidays: [`2023-12-26`],
        holidayFormat: `YYYY-MM-DD`,
      }
    }]
    ...
  }
})

オプションの defaultLocale カスタマイズ

defaultLocale: でロケール文字列の代わりに、カスタムロケールを持つ配列を定義できます。詳細については、dayjs のカスタマイズを参照してください。

relativeTime 設定の例を次に示します。ゴラムが理解できるものを作成しましょう

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"
      }
    }]
    ...
  }
})

開発

# 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