dayjs-module Nuxt3 Support

Nuxt3 Support

Open acidjazz opened this issue 2 years ago • 11 comments

If I get more time I will make this a PR.

I have written a DayJS plugin for nuxt3 and so far its working pretty well:

plugnis/dayjs.ts

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  dayjs.extend(relativeTime)
  nuxtApp.provide('dayjs', dayjs)
})

declare module '#app' {
  interface NuxtApp {
    $dayjs: dayjs.Dayjs
 }
}

I assume next steps are to transfer this into the template/runtime format and plug in the locale config.

Nov 28 '21 04:11 acidjazz

Very much looking forward to you sending me your PR!

Nov 28 '21 06:11 potato4d

we also need to declare:

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
  }
}

in order to use it in templates without errors.

Jun 02 '22 04:06 avxkim

Well if you really need to use it now you can just create a plugin

// ~/plugins/dayjs.ts
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import updateLocale from 'dayjs/plugin/updateLocale';

dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
dayjs.extend(updateLocale);
// OTHER PLUGINS

export default defineNuxtPlugin(() => {
  return {
    provide: {
      dayjs,
    },
  };
});

<script setup lang="ts">
const { $dayjs } = useNuxtApp();
</script>

<template>
  <div>
    Now: {{ $dayjs() }}
  </div>
</template>

Jun 11 '22 18:06 wobsoriano

so when using this plugin, when i try to run yarn build or yarn generate then yarn preview i get this error:

[nuxt] [request error] Cannot find module '/Users/thejacer87/Development/safecom-fmeuc/.output/server/node_modules/dayjs/plugin/utc' imported from /Users/thejacer87/Development/safecom-fmeuc/.output/server/chunks/app/server.mjs
Did you mean to import dayjs/plugin/utc.js?
  at new NodeError (node:internal/errors:371:5)

Not sure if it's a nuxt issue or dayjs?

Jun 24 '22 20:06 safejace

so when using this plugin, when i try to run yarn build or yarn generate then yarn preview i get this error:

[nuxt] [request error] Cannot find module '/Users/thejacer87/Development/safecom-fmeuc/.output/server/node_modules/dayjs/plugin/utc' imported from /Users/thejacer87/Development/safecom-fmeuc/.output/server/chunks/app/server.mjs
Did you mean to import dayjs/plugin/utc.js?
  at new NodeError (node:internal/errors:371:5)

Not sure if it's a nuxt issue or dayjs?

I haven't tested my version of the nuxt3 plugin with a static-compiled version yet - maybe try adding the .js ?

Jun 25 '22 21:06 acidjazz

We need it.thanks!

Jun 28 '22 13:06 Developer27149

I've created a Nuxt 3 module using the official Nuxt 3 module-builder: https://github.com/nathanchase/dayjs/

It's on npm currently at: https://www.npmjs.com/package/@nathanchase/nuxt-dayjs-module

It's barebones, and some of the plugins I use are hardcoded into it. Someone else might be able to make it more modular to use the same dayjs configuration object that the Nuxt 2 dayjs-module uses to specify plugins and other options?

I wasn't sure the protocol of how to submit this as a PR for this module, since it's vastly different. You can check the playground for examples of the module working.

Take a look @potato4d, and see what you think.

Jul 25 '22 16:07 nathanchase

I've created a Nuxt 3 module using the official Nuxt 3 module-builder: https://github.com/nathanchase/dayjs/

Well, I'm having some issue when actually using the module in Nuxt 3 where I get an error: Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/dayjs/dayjs.min.js?v=e84ee87d' does not provide an export named 'default' (at plugin.mjs:1:8) , although the module's playground itself works perfectly fine...

Jul 25 '22 17:07 nathanchase

OK! Got it working! v1.0.7 - Now also supports configuration in nuxt.config, like:

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

Jul 25 '22 22:07 nathanchase

working at https://github.com/nuxt-community/dayjs-module/tree/next

Jul 29 '22 11:07 potato4d

Hi @potato4d! I was working on a Nuxt 3 version of this module a while ago. Would you be interested in taking a look? It has useDayjs() composable and auto register of dayjs types.