devaccess / vue3-dayjs

vue3-dayjs

A wrapper for integrating Day.js into Vue.js 3

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

You can use Day.js without using this plugin

This plugin allows you to easily include Day.js globally. This is not recommended with Vue 3, and they recommend using provide/inject instead. But if you're just getting started with Day.js or know you prefer it global, you can use this plugin to make your coding life a bit easier.

Installation

npm install vue3-dayjs-plugin

Setup Globally

import VueDayjs from 'vue3-dayjs-plugin'

Vue.use(VueDayjs) // in your createApp call

Usage Example

Day.js will be available in your Vue templates using $date or $dayjs.

JS

    // you can call like this when using the old syntax
    this.$date('2018-08-08').format('DD/MM/YYYY');

    // when using the new <script setup> syntax you have to bring Day.js in manually
    // this means import Day.js into the script yourself or you can use the useDate composable included with this package.
    import { useDate } from 'vue3-dayjs-plugin/useDate';
    <script setup>
        const date = useDate();
        // then anywhere you need to use Day.js
        date('2018-08-08').format('DD/MM/YYYY');
    </script>
    // this is because global properties are not accessible within <script setup> :(

HTML

    <!-- this method of using Day.js ($date or $dayjs) will be globally available in all your components -->
    <div>{{ $date('2023-04-12').format('DD/MM/YYYY') }}</div>
    <div>{{ $dayjs('2023-04-12').format('DD/MM/YYYY') }}</div>

License

MIT