♻️ unable to extend while the composable is executing

README.md

@@ -55,7 +55,7 @@ You can use the provided composables to access Day.js anywhere.
 ```vue
 <template>
   <div>
-    <time :datetime="useDayjs('2023-01-01').utc().toString()"> {{ date }} </time>
+    <time :datetime="useDayjs()('2023-01-01').utc().toString()"> {{ date }} </time>
   </div>
 </template>
 ```
@@ -83,11 +83,13 @@ export default defineNuxtConfig({
 For example, is need to add an external plugin
 
 ```ts
-// plugins/dayjs.plugin.ts
-import dayjsBusinessTime from 'dayjs-business-time'
-
-export default defineNuxtPlugin(() => {
-  useDayjs().extend(dayjsBusinessTime)
+export default defineNuxtConfig({
+  modules: ['dayjs-nuxt'],
+  dayjs: {
+    ...
+    externalPlugins: [{name: 'dayjsBusinessTime', package: 'dayjs-business-time'}]
+    ...
+  }
 })
 ```
 
@@ -101,8 +103,7 @@ Here is an example for a relativeTime configuration, lets create one that [Gollu
 export default defineNuxtConfig({
   modules: ['dayjs-nuxt'],
   dayjs: {
-    locales: ['en', 'fr'],
-    plugins: ['relativeTime'],
+    ...
     defaultLocale: ['en', {
       relativeTime: {
         future: "in %s",

playground/app.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { useDayjs } from '../src/runtime/composables/dayjs';
+const dayjs = useDayjs()
 const card = false
 const icon = false
-console.log(useDayjs('2022-01-01').fromNow())
+dayjs.setHolidays([
+  '2023-10-31',
+])
 </script>
 
 <template>
@@ -21,22 +24,22 @@ console.log(useDayjs('2022-01-01').fromNow())
         <tr>
           <td>Current time</td>
           <td> dayjs().format('dd, DD MMM YYYY HH:mm:ss')</td>
-          <td>{{ useDayjs().format('dd, DD MMM YYYY HH:mm:ss') }}</td>
+          <td>{{ dayjs().format('dd, DD MMM YYYY HH:mm:ss') }}</td>
         </tr>
         <tr>
           <td>Relative Time</td>
           <td> dayjs("2023-01-01").FromNow()</td>
-          <td> {{ useDayjs("2023-01-01").fromNow() }} </td>
+          <td> {{ dayjs("2023-01-01").fromNow() }} </td>
         </tr>
         <tr>
           <td>UTC Time</td>
           <td>dayjs().utc().format('dd, DD MMM YYYY HH:mm:ss')</td>
-          <td> {{ useDayjs().utc().format('dd, DD MMM YYYY HH:mm:ss') }}</td>
+          <td> {{ dayjs().utc().format('dd, DD MMM YYYY HH:mm:ss') }}</td>
         </tr>
         <tr>
           <td>Week Start</td>
           <td>dayjs().startOf('week').format('dddd')</td>
-          <td> {{ useDayjs().startOf('week').format('dddd') }}</td>
+          <td> {{ dayjs().startOf('week').format('dddd') }}</td>
         </tr>
       </tbody>
     </table>

playground/nuxt.config.ts

@@ -3,6 +3,7 @@ export default defineNuxtConfig({
   dayjs: {
     locales: ['fr', 'en'],
     plugins: ['relativeTime', 'utc', 'timezone'],
+    externalPlugins: [{name: 'dayjsBusinessTime', package: 'dayjs-business-time'}],
     defaultLocale: ['en', {
       weekStart: 1,
       relativeTime: {

playground/package.json

@@ -3,6 +3,7 @@
   "name": "my-module-playground",
   "devDependencies": {
     "@unocss/nuxt": "^0.51.8",
+    "dayjs-business-time": "^1.0.4",
     "unocss": "^0.51.8"
   }
 }

src/module.ts

@@ -66,11 +66,19 @@ export interface ModuleOptions {
   defaultTimezone?: string
 
   /**
-   * An array of optional plugins to load
+   * An array of built-in optional plugins to load
    * @example ['timezone', 'utc']
    */
 
   plugins?: string[]
+
+  /**
+   * An array of external optional plugins to load
+   * @example ['timezone', 'utc']
+   */
+
+  externalPlugins?: {name: string, package: string}[]
+
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -85,13 +93,15 @@ export default defineNuxtModule<ModuleOptions>({
   defaults: {
     locales: [],
     plugins: ['relativeTime', 'utc'],
+    externalPlugins: [],
     defaultLocale: undefined,
     defaultTimezone: undefined,
   },
   setup (options, nuxt) {
 
     const resolver = createResolver(import.meta.url)
     options.plugins = [...new Set(options.plugins)]
+    options.externalPlugins = [...new Set(options.externalPlugins)]
 
     if (options.defaultTimezone && !options.plugins.includes('timezone'))
       throw new Error('You must include the timezone plugin in order to set a default timezone')
@@ -119,14 +129,16 @@ export default defineNuxtModule<ModuleOptions>({
   }
 })
 
-const generateImports = ({ locales, plugins, defaultLocale, defaultTimezone }: ModuleOptions) => `
+const generateImports = ({ locales, plugins, externalPlugins, defaultLocale, defaultTimezone }: ModuleOptions) => `
 // Generated by dayjs-nuxt-module
 import dayjs from 'dayjs'
 import updateLocale from 'dayjs/plugin/updateLocale'
 ${locales?.map(locale => `import 'dayjs/locale/${locale}'`).join('\n')}
 ${plugins?.map(plugin => `import ${plugin} from 'dayjs/plugin/${plugin}'`).join('\n')}
+${externalPlugins?.map(plugin => `import ${plugin.name} from '${plugin.package}'`).join('\n')}
 
 ${plugins?.map(plugin => `dayjs.extend(${plugin})`).join('\n')}
+${externalPlugins?.map(plugin => `dayjs.extend(${plugin.name})`).join('\n')}
 ${defaultLocale ?  "dayjs.extend(updateLocale)" : ''}
 ${locales?.map(locale =>  `dayjs.locale('${locale}')`).join('\n')}
 ${defaultTimezone ? `dayjs.tz.setDefault('${defaultTimezone}')` : ''}

src/runtime/composables/dayjs.ts

@@ -1,7 +1,7 @@
 import { useNuxtApp } from '#app'
-import dayjs, { Dayjs } from 'dayjs'
+import { Dayjs } from 'dayjs'
 
-export const useDayjs = (date?: dayjs.ConfigType): Dayjs => {
+export const useDayjs = (): (...args: any[]) => Dayjs => {
   const { $dayjs } = useNuxtApp()
-  return $dayjs(date)
+  return $dayjs
 }

src/runtime/plugin.ts

@@ -3,19 +3,19 @@ import { defineNuxtPlugin } from '#app'
 
 declare module '#app' {
   interface NuxtApp {
-    $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
+    $dayjs: (...args: any[]) => dayjs.Dayjs
   }
 }
 
 declare module 'vue' {
   interface ComponentCustomProperties {
-    $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
+    $dayjs: (...args: any[]) => dayjs.Dayjs
   }
 }
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
-    $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
+    $dayjs: (...args: any[]) => dayjs.Dayjs
 
   }
 }