https://github.com/nuxt-community/dayjs-module
Day.js module for your Nuxt 2 project.
https://github.com/nuxt-community/dayjs-module
dayjs nuxt nuxt-module nuxtjs vue
Last synced: 3 months ago
JSON representation
Day.js module for your Nuxt 2 project.
- Host: GitHub
- URL: https://github.com/nuxt-community/dayjs-module
- Owner: nuxt-community
- License: mit
- Created: 2019-03-07T15:04:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T17:50:56.000Z (3 months ago)
- Last Synced: 2025-04-09T18:51:43.516Z (3 months ago)
- Topics: dayjs, nuxt, nuxt-module, nuxtjs, vue
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@nuxtjs/dayjs
- Size: 2.54 MB
- Stars: 261
- Watchers: 2
- Forks: 15
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @nuxtjs/dayjs
[](https://github.com/prettier/prettier)
[](https://www.patreon.com/potato4d)
[](https://opensource.org/licenses/MIT)
[](https://npmjs.com/package/@nuxtjs/dayjs)
[](#contributors)
[](https://npmjs.com/package/@nuxtjs/dayjs)
[](https://codecov.io/gh/nuxt-community/dayjs-module)> The best way to use Day.js easily in your Nuxt 2 project.
Looking for a Nuxt 3 alternative? Try out:
- https://github.com/nathanchase/dayjs
- https://github.com/fumeapp/dayjs## Installation
```bash
$ yarn add @nuxtjs/dayjs # or npm install
```## Usage
### 1. Register dayjs module to your Nuxt Application
```js
export default {
// ...
modules: [
'@nuxtjs/dayjs'
],// Optional
dayjs: {
locales: ['en', 'ja'],
defaultLocale: 'en',
defaultTimeZone: 'Asia/Tokyo',
plugins: [
'utc', // import 'dayjs/plugin/utc'
'timezone' // import 'dayjs/plugin/timezone'
] // Your Day.js plugin
}
// ...
}
```### 2. Use $dayjs on Context, Vue instance
with Context
```html
export default {
asyncData({ $dayjs }) {
return {
now: $dayjs().format('YYYY/MM/DD')
}
}
}```
with Vue instance
```html
export default {
data() {
return {
latestClicked: null
}
},
methods: {
handleClickButton() {
this.latestClicked = this.$dayjs().format('YYYY/MM/DD')
}
}
}```
### For Typescript users
Add the types to your `"types"` array in `tsconfig.json` after the `@nuxt/types` entry.
For dayjs plugins, add their relative types like `dayjs/plugin/_pluginName_`.
#### tsconfig.json
```json
{
"compilerOptions": {
"types": [
"@nuxt/types",
"@nuxtjs/dayjs",
"dayjs/plugin/relativeTime",
]
}
}
```## Development
```bash
$ git clone https://github.com/nuxt-community/dayjs-module.git
$ cd @nuxtjs/dayjs
$ yarn
```## License
MIT @potato4d
## Note
This project generated by [create-nuxt-module](https://github.com/potato4d/create-nuxt-module)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Takuma HANATANI(@potato4d)
💻 🐛 📖 💡 💬 👀
Bryan Daniel Velastegui Lucero
💻
Wei
💻
かずえもん
📖
Daiki Ojima
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!