8000 Nuxt3 Support · Issue #376 · nuxt-community/dayjs-module · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Nuxt3 Support #376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
acidjazz opened this issue Nov 28, 2021 · 15 comments
Closed

Nuxt3 Support #376

acidjazz opened this issue Nov 28, 2021 · 15 comments

Comments

@acidjazz
Copy link
acidjazz commented Nov 28, 2021 •
edited
Loading

UPDATE: 3rd party module available https://github.com/fumeapp/dayjs

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.
@potato4d
Copy link
Member

Very much looking forward to you sending me your PR!

This was referenced Mar 1, 2022
Closed
Closed
@avxkim
Copy link
avxkim commented Jun 2, 2022 •
edited
Loading

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.

@wobsoriano
Copy link

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>

@safejace
Copy link

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?

@acidjazz
Copy link
Author

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 ?

@AaronConlon
Copy link

We need it.thanks!

@nathanchase
Copy link
nathanchase commented Jul 25, 2022 •
edited
Loading

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.

@nathanchase
Copy link

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/dayjs@1.11.4/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...

@nathanchase
Copy link
nathanchase commented Jul 25, 2022 •
edited
Loading

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

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

@nathanchase nathanchase mentioned this issue Jul 25, 2022
Merged
@potato4d
Copy link
Member

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

@JoaoPedroAS51
Copy link
JoaoPedroAS51 commented Aug 29, 2022 •
edited
Loading

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.

@CaptainFalcon92
Copy link

@potato4d I sure am interested. Any status on this ?
The doc does not mention anything yet so i assume it is still in the making

@Dodje
Copy link
Dodje commented Apr 28, 2023

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

9 month without any update in the branch. Is it still maintained?

@acidjazz
Copy link
Author

I am working on an official nuxt3 module that will be live next week @Dodje, i will close this issue with its URL ASAP

@acidjazz acidjazz mentioned this issue May 1, 2023
Merged
@acidjazz
Copy link
Author
acidjazz commented May 1, 2023

@Dodje @Developer27149 @safejace @avxkim

https://github.com/fumeapp/dayjs

@acidjazz acidjazz closed this as completed May 1, 2023
@acidjazz acidjazz mentioned this issue May 1, 2023
Closed
@bmulholland bmulholland mentioned this issue Oct 31, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@acidjazz @avxkim @nathanchase @potato4d @wobsoriano @JoaoPedroAS51 @AaronConlon @CaptainFalcon92 @Dodje @safejace
0