nathanchase/dayjs

Dayjs module for Nuxt 3

@nathanchase/nuxt-dayjs-module

This is a Nuxt 3 compatible module built with the official Nuxt 3 module-builder for dayjs. This is meant as a Nuxt 3 version of dayjs-module to satisfy Nuxt 3 support.

Usage:

// ./nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nathanchase/nuxt-dayjs-module'
  ]
  ...
});

Add dayjs plugins (ex: duration) via configuration in nuxt.config like so:

dayjs: {
    plugins: [
      'duration',
      'relativeTime',
      'advancedFormat',
      'weekday'
    ]
}

See /playground/app.vue for working examples.

On npm: https://www.npmjs.com/package/@nathanchase/nuxt-dayjs-module

Development

• Run 'npm install' to install required packages.
• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.

dayjs's Issues

Plugins not loaded

Sorry to be a bother again, but now I've loaded dayOfYear plugin, but it's not resolved. I don't get any error, it just doesn't work. I think because you switched to look for ${plugin}/index.js: 7e48c97#diff-93479c5e7e91bcb11c80b7dcd9f114294034fa5443fc0609473721fa6c2c5c88

However, dayjs is still compiled down to ${plugin}.js: https://www.npmjs.com/package/dayjs?activeTab=code (I can't link to /dayjs/plugins dir in this UI).

error when using others options

Really ty for this port, but when i try to use others config plugins options a error occur:

with this works:
dayjs: {
plugins: ['duration', 'relativeTime', 'advancedFormat', 'weekday'],
},

with this dont:
dayjs: {
locales: ['en', 'ja'],
defaultLocale: 'en',
defaultTimeZone: 'Asia/Tokyo',
plugins: ['duration', 'relativeTime', 'advancedFormat', 'weekday'],
},

how can i set a defaultLocale and timezone on your plugin

Incompatibility with Node 20

I get this error with the latest version @nathanchase/[email protected] in CI, as it depends on @nuxt/[email protected]:

error @nuxt/[email protected]: The engine "node" is incompatible with this module. Expected version "^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0". Got "20.11.1"

While I can workaround with yarn install --ignore-engines, I'd rather have the dependencies updated.

@nathanchase Would you mind merging the dependabot PRs and releasing a new version?

Support default language settings?

Support default language settings?
I set locale as follows, but it didn't work.

export default defineNuxtConfig({
 modules: [
    '@nathanchase/nuxt-dayjs-module'
  ],
  dayjs: {
    locales: [
      'ko'
    ],
    defaultLocale: 'ko',
    plugins: [
      'relativeTime',
      'isoWeek',
      'utc',
      'weekday',
      'isToday',
      'isSameOrBefore',
      'isSameOrAfter',
      'localizedFormat',
      'timezone',
      'updateLocale'
    ]
  }
})

Thank you for your open source contribution!

RelativeTime

Great module, thanks for the work!

i'm looking to customize the relative time like here
https://day.js.org/docs/en/customization/relative-time

Here's my code
dayjs: { plugins: ['relativeTime', 'UpdateLocale'], relativeTime: { future: 'in %s', past: '%s ago', s: 'today', m: 'today', mm: 'today', h: 'an hour', hh: '%d hours', d: 'a day', dd: '%d days', M: 'a month', MM: '%d months', y: 'a year', yy: '%d years', }, },

But it doesn't work (no error message but no change on the output)

Any idea on how to customize this?

[vue warn]: Hydration text content mismatch

Hi,
Thank you for creating this library.
I have a problem that bothers me.

After setting up the plug-in in the nuxt.config file, a warning message appears when calling a function from page.
In the component(Nuxt components is known as server-side rendering) template The warning message is not exposed when inserting the tag.
But I want to know the fundamental solution.
Can you help me?

// https://nuxt.com/docs/api/configuration/nuxt-config
import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
	runtimeConfig: {
		public: {
			apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:8080',
		},
	},
	modules: ['@nathanchase/nuxt-dayjs-module'],
	css: ['@/assets/scss/import.scss'],
	vite: {
		plugins: [eslintPlugin()],
	},
	dayjs: {
		locales: ['ko'],
		defaultLocale: 'ko',
		plugins: ['duration', 'relativeTime', 'advancedFormat', 'weekday', 'localeData'],
	},
	telemetry: false,
});

//Calendar.vue
<template>
<div v-for="(weekDay, no) in weekDays" :key="no" class="calendar-cell" :class="no === 0 ? 'holliday' : ''">
					<span>{{ weekDay }}</span>
				</div>
</template>
<script setup>
import { useNuxtApp } from '#app';
const { $dayjs } = useNuxtApp();
const weekDays = ref($dayjs().localeData().weekdaysShort());
</script>

//index.vue
<template>
    <Calendar></Calendar>
</template>

Vite Error on build

ERROR [vite:load-fallback] Could not load dayjs/plugin/Utc.js (imported by virtual:nuxt:/opt/service/.nuxt/dayjs.config.mjs): ENOENT: no such file or directory, open 'dayjs/plugin/Utc.js'

Building in Docker, node-18-alpine

after upgrade to 1.0.14 gives a error

downgrading to 1.0.13 works normally

im using nuxt 3.3.3

Strongly typed $dayjs from useNuxtApp()

$dayjs is of unknown type in my <script lang="ts">, so it works fine, but VSCode gives me errors when I try to use it.

Impredictible error on first run

Hi Nathan, i am testing the new release and have an issue with the relative time plugin, in the first run i get the error
Uncaught (in promise) TypeError: $setup.$dayjs(...).fromNow is not a function
After terminate the process and run
npm run dev again, the project works fine.
May be related with this dayjs issue iamkun/dayjs#1242
Link to test
https://stackblitz.com/edit/github-qiphrf?file=README.md (you can try terminate the first run and execute npm run dev again)

Rollup failed to resolve import

When building my app on my linux server (running npm run dev) I got this error;

ERROR [vite]: Rollup failed to resolve import "dayjs/esm/plugin/UpdateLocale/index.js" from "virtual:nuxt:/APP_FOLDER/.nuxt/dayjs.config.mjs" This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external

nuxt-dayjs-module: ^1.0.15
nuxt: ^3.4.3
node version: v19.8.1

for some reasons I cannot reproduce it on my computer