nathanchase / dayjs

Dayjs module for Nuxt 3

Hello!

Find out more about me via:

npx nathanchase

dayjs's Issues

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

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?

after upgrade to 1.0.14 gives a error

downgrading to 1.0.13 works normally

im using nuxt 3.3.3

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?

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

[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

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!

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)