how to properly use dayjs inside vue 3 app and component

Question

I am able to use dayjs inside vue3 component by adding it to data()

import dayjs from 'dayjs'

export default {
  data() {
    return {
      dayjs
    }
  }
}

Then I will be able to use it inside template but is this the correct way to do?

What if I want to configure dayjs and use it globally? I tried

import dayjs from 'dayjs'
import { createApp } from 'vue'
const app = createApp(App)
    
app.use(dayjs) // doesn't work
app.dayjs = dayjs // doesn't work
    
app.mount("#app')

but couldn't get it to work so far.
What is the correct way to do it?

I think if we load dayjs in main.js file somthing like Vue.use(require("dayjs")); then in components import it like this import * as daysjs from "daysjs/daysjs";. — abhay, Mar 10 '21 at 07:38

score 13 · Accepted Answer · answered Mar 15 '21 at 18:54

13

u can use

import dayjs from 'dayjs'
import { createApp } from 'vue'
const app  = createApp(App)
    
app.config.globalProperties.$dayjs = dayjs
    
app.mount("#app')

answered Mar 15 '21 at 18:54

Трин Зотофф

182
2
7

Thank you, is this how object is passed normally? and how do I use it inside the component? – Anurat Chapanond Mar 16 '21 at 05:18
3

mmm, best practice use `app.use()`, but it need to adapt dayjs lib. `app.config.globalProperties` normal practice. in component js u can use `this.$dayjs`, in template `$dayjs` – Трин Зотофф Mar 17 '21 at 04:57
Thanks a lot! will try that – Anurat Chapanond Mar 17 '21 at 10:22
2

This just gives me the error ```Cannot read property 'globalProperties' of undefined``` any ideas? – justrusty Jun 18 '21 at 14:48

Neil Hewitt · Answer 2 · 2021-10-27T13:03:03.957

The accepted method does not seem to take into account composition API. My understanding is that the only way to use this with Composition API is to provide/inject. Example below working with composition API, options API in script and templates.

//[main.js]

import dayjs from 'dayjs' //import dayjs in your main.js
 
app.provide('dayJS', dayjs) // provide dayJS

app.use(router).mount("#app") // mount app

// [component.js]

// Composition API setup ------------------
import { inject } from 'vue' // import inject from vue
const dayJS = inject("dayJS") // inject dayJS

//make sure that you return dayJS in setup along with any functions/variables
return { dayJS }

// Options API setup ------------------
app.component('mycomponent', {
  inject: ['dayJS'],
  created() {
    console.log(dayJS())  
  }
})

//You can now use dayJS directly within setup ex: dayJS() or template ex: {{dayJS()}}.

Less explicit but adding this line `app.config.globalProperties.$dayjs = dayjs` after `app.provide('dayjs', dayjs)` is for me the best solution. It allows me to use dayjs directly in a template without `inject`. — k3z, Apr 24 '22 at 10:48

Hexodus · Answer 3 · 2022-09-23T08:32:38.313

You can use provide/inject to use dayjs inside of your component.

//main.js
import dayjs from 'dayjs'
import { createApp } from 'vue'

const app = createApp({
  provide() {
    return {
      $dayjs: dayjs // <-- provide 
    }
  },    
    
app.mount("#app')

//myComponent.vue
<template>
    DajsJS: {{ myDays }}
</template>

<script>
export default {
  name: 'myComponent',
  inject: ['$dayjs'], // <-- inject
  computed: {
    myDays() {
      return this.$dayjs('1990-01-01')
    }
  }
}
</script>

score 0 · Answer 4 · answered Dec 17 '21 at 06:08

If you are using composition api you can use direct dayjs without having to pass it through a provider. Look at the following example.

<template>
  <section>
    <h1>Título de ejemplo</h1>
    <h2>
      Fecha de creación 
      {{ dayjs('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)').format('DD/MM/YYYY HH:mm') }}
    </h2>
    <h3>
      Otra prueba {{ date }}
    </h3>
  </section>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";

import dayjs from "dayjs";

export default defineComponent({
  name: 'Ejemplo',
  setup() {

    const date_example = ref<string>('Fri Dec 17 2021 00:55:42 GMT-0500 (hora estándar de Colombia)');

    const date = computed<string>((): string => {
      return dayjs(date_example.value).format('DD/MM/YYYY HH:mm');
    });

    return {
      dayjs,
      date,
    }
  }
});
</script>

how to properly use dayjs inside vue 3 app and component

4 Answers4