Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielroe/nuxt-time
⏰ SSR-safe time element for Nuxt 3
https://github.com/danielroe/nuxt-time
date nuxt nuxt-module server ssr
Last synced: 6 days ago
JSON representation
⏰ SSR-safe time element for Nuxt 3
- Host: GitHub
- URL: https://github.com/danielroe/nuxt-time
- Owner: danielroe
- License: mit
- Created: 2023-02-11T01:52:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T14:19:29.000Z (3 months ago)
- Last Synced: 2024-10-30T03:42:59.530Z (3 months ago)
- Topics: date, nuxt, nuxt-module, server, ssr
- Language: Vue
- Homepage:
- Size: 1.64 MB
- Stars: 330
- Watchers: 2
- Forks: 13
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Nuxt Time
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]
> SSR-safe time element for [Nuxt](https://nuxt.com)
- [✨ Changelog](https://github.com/danielroe/nuxt-time/blob/main/CHANGELOG.md)
- [▶️ Online playground](https://stackblitz.com/github/danielroe/nuxt-time/tree/main/playground)
## Features
- ✨ SSR/SSG-safe rendering of any date/time
- 💪 Prevents hydration mismatch on client
- 🏁 Respects browser locale
- ✅ Renders semantic `
## Installation
Install and add `nuxt-time` to your `nuxt.config`.
```bash
npx nuxi@latest module add time
```
```js
export default defineNuxtConfig({
modules: ['nuxt-time'],
})
```
## Usage
To use, you can use the `` component anywhere in your app. It will render a spec-compliant `
It accepts `datetime` and `locale` (optional) properties, along with any property accepted by `Intl.DateTimeFormat` (see [MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat)). **Note**: you can provide a `Date` or `number` (e.g. `Date.now()`) via `datetime` and it will be rendered correctly as an ISO-formatted date.
```vue
```
## Relative Time Formatting
Nuxt Time also supports relative time formatting using the `Intl.RelativeTimeFormat` API. You can enable this feature by setting the `relative` prop to `true`.
```vue
```
## 💻 Development
- Clone this repository
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
- Install dependencies using `pnpm install`
- Stub module with `pnpm dev:prepare`
- Run `pnpm dev` to start [playground](./playground) in development mode
## License
Made with ❤️
Published under the [MIT License](./LICENCE).
[npm-version-src]: https://img.shields.io/npm/v/nuxt-time?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-time
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-time?style=flat-square
[npm-downloads-href]: https://npm.chart.dev/nuxt-time
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/danielroe/nuxt-time/ci.yml?branch=main
[github-actions-href]: https://github.com/danielroe/nuxt-time/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/nuxt-time/main?style=flat-square
[codecov-href]: https://codecov.io/gh/danielroe/nuxt-time