![\"vue-use-date](\"https://vue-use-date.netlify.app/assets/vue-use-date.png\")
It's easy to use Vue Use Date APIs to parse, validate, manipulate, and display dates and times.
\r\n\r\n## :scroll: Documentation\r\n\r\nYou can find for more details, and docs on vue-use-date website.\r\n\r\n## :rocket: Introduction\r\n\r\nIt's easy to use Vue Use Date APIs to parse, validate, manipulate, and display dates and times. `vue-use-date`.\r\n\r\n## :package: Installation\r\n\r\n```bash\r\n# install with yarn\r\nyarn add vue-use-date or yarn add @vue/composition-api vue-use-date\r\n# install with npm\r\nnpm install vue-use-date or npm install @vue/composition-api vue-use-date\r\n```\r\n\r\n## :calendar: useDate\r\n\r\n> `useDate` It is a function that we have completed date operations in functions.\r\n\r\n## :scroll: Documentation\r\n\r\nVue use date documentation\r\n\r\n## :maple_leaf: Usage\r\n\r\n`useDate` function import.\r\n\r\n```js\r\nimport { useDate } from 'vue-use-date';\r\nconst { format, timeAgo, getDate, utc, timezone, difference } = useDate('Type a here....');\r\n```\r\n\r\n## :hammer_and_wrench: Setup\r\n\r\n### :key: Step 1\r\n\r\nsrc/dayjs.js\r\n\r\nOpen a file named as `dayjs.js` inside the folder of `src` and add the codes below. The reason adding `dayjs.js` file is customizability of `dayjs` library.\r\n\r\n#### dayjs.js\r\n\r\n```js\r\nimport Vue from 'vue';\r\nimport dayjs from 'dayjs';\r\n// For the other language options, add \"dayjs/locale/{langCode}\"\r\nimport 'dayjs/locale/tr';\r\nimport 'dayjs/locale/ar';\r\nimport relativeTime from 'dayjs/plugin/relativeTime';\r\nimport localizedFormat from 'dayjs/plugin/localizedFormat';\r\nimport utc from 'dayjs/plugin/utc';\r\nimport timezone from 'dayjs/plugin/timezone';\r\n\r\ndayjs.extend(relativeTime);\r\ndayjs.extend(localizedFormat);\r\ndayjs.extend(utc);\r\ndayjs.extend(timezone);\r\n\r\nObject.defineProperties(Vue.prototype, {\r\n $dayjs: {\r\n get() {\r\n return dayjs;\r\n },\r\n },\r\n});\r\n```\r\n\r\n### :key: Step 2\r\n\r\nImport `dayjs.js` file inside `main.js`\r\n\r\n#### main.js\r\n\r\n```js\r\nimport Vue from 'vue';\r\nimport App from './App.vue';\r\nimport VueCompositionApi from '@vue/composition-api';\r\n// \"dayjs.js\" imported\r\nimport './dayjs.js';\r\n\r\nVue.use(VueCompositionApi);\r\nVue.config.productionTip = false;\r\n\r\nnew Vue({\r\n render: h => h(App),\r\n}).$mount('#app');\r\n```\r\n\r\n## :rocket: Example\r\n\r\nExample.vue\r\n\r\n```js\r\n\r\n{{ dateFormat }}
\r\n{{ timeAgoFormat }}
\r\n{{ getDateFormat }}
\r\n{{ differenceFormat }}
\r\n{{ utcFormat }}
\r\n{{ timezoneFormat }}
\r\n