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

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

[![donate: Patreon](https://img.shields.io/badge/donate-patreon-orange.svg?style=flat-square)](https://www.patreon.com/potato4d)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](https://opensource.org/licenses/MIT)

[![NPM version](https://img.shields.io/npm/v/@nuxtjs/dayjs.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/dayjs)

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

[![NPM downloads](https://img.shields.io/npm/dm/@nuxtjs/dayjs.svg?style=flat)](https://npmjs.com/package/@nuxtjs/dayjs)

[![codecov](https://codecov.io/gh/nuxt-community/dayjs-module/branch/master/graph/badge.svg)](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!