Skip to content

nuxt-community/dayjs-module

Repository files navigation

@nuxtjs/dayjs

code style: prettier donate: Patreon License: MIT NPM version All Contributors NPM downloads codecov

The best way to use Day.js easily in your Nuxt 2 project.

Looking for a Nuxt 3 alternative? Try out:

Installation

$ yarn add @nuxtjs/dayjs # or npm install

Usage

1. Register dayjs module to your Nuxt Application

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

<script>
export default {
  asyncData({ $dayjs }) {
    return {
      now: $dayjs().format('YYYY/MM/DD')
    }
  }
}
</script>

with Vue instance

<script>
export default {
  data() {
    return {
      latestClicked: null
    }
  },
  methods: {
    handleClickButton() {
      this.latestClicked = this.$dayjs().format('YYYY/MM/DD')
    }
  }
}
</script>

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

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/dayjs",
      "dayjs/plugin/relativeTime",
    ]
  }
}

Development

$ 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

Contributors

Thanks goes to these wonderful people (emoji key):


Takuma HANATANI(@potato4d)

💻 🐛 📖 💡 💬 👀

Bryan Daniel Velastegui Lucero

💻

Wei

💻

かずえもん

📖

Daiki Ojima

💻

This project follows the all-contributors specification. Contributions of any kind welcome!