Giter VIP home page Giter VIP logo

dayjs's Introduction

Nuxt Day.js module

Day.js Nuxt Module

Fast 2kB alternative to Moment.js with the same modern API

npm version npm downloads License Nuxt

Day.js Nuxt Module supporting v3

Features

  • ⛰  Nuxt 3 ready
  • 🚠  Activate any plugin or locale available
  • 🌲  Specify default locales and timezones

Quick Setup

  1. Add dayjs-nuxt dependency to your project
npx nuxi@latest module add dayjs
  1. Add dayjs-nuxt to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'dayjs-nuxt'
  ]
})

Basic Usage

You can use the provided $dayjs to access Day.js in template.

<template>
  <div>
    <time :datetime="$dayjs('2023-01-01').utc().toString()"> {{ date }} </time>
  </div>
</template>

Composables

You can use the useDayjs composable to access Day.js anywhere.

<script setup>
  import { useDayjs } from '#dayjs' // not need if you are using auto import
  const dayjs = useDayjs()
  dayjs.locale('fr')
  dayjs.extend(...)
</script>

Configuration

You can specify any amount of locales, plugins, set a default locale, and set a default timezone

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    locales: ['en', 'fr'],
    plugins: ['relativeTime', 'utc', 'timezone'],
    defaultLocale: 'en',
    defaultTimezone: 'America/New_York',
  }
})

By default we include the relativeTime and utc plugins, and always import updateLocale

External Plugins

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    ...
    externalPlugins: [{
      name: 'dayjsBusinessDays',
      package: 'dayjs-business-days2',
      option: {
        holidays: [`2023-12-26`],
        holidayFormat: `YYYY-MM-DD`,
      }
    }]
    ...
  }
})

Optional defaultLocale customization

Instead of a locale string in defaultLocale:, you can define an array with a custom locale. See dayjs customization for more information.

Here is an example for a relativeTime configuration, lets create one that Gollum would understand:

export default defineNuxtConfig({
  modules: ['dayjs-nuxt'],
  dayjs: {
    ...
    defaultLocale: ['en', {
      relativeTime: {
        future: "in %s",
        past: "%s ago",
        s: 'a few secondses',
        m: "a minute",
        mm: "%d minuteses",
        h: "an hour",
        hh: "%d hourses",
        d: "a day",
        dd: "%d dayses",
        M: "a month",
        MM: "%d monthseses",
        y: "a year",
        yy: "%d yearseses"
      }
    }]
    ...
  }
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

dayjs's People

Contributors

acidjazz avatar damianglowala avatar danielroe avatar gabortorma avatar jb-alvarado avatar jeevanya avatar joaopedroas51 avatar reslear avatar tcampbppu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

dayjs's Issues

Duplicated line

The plugin is added two times with addPlugin(resolver.resolve('runtime/plugin.client')).
Line L40 and L46

updateLocale is not defined

Hi!
I've a 500 error : updateLocale is not defined when I run the Nuxt server.

Look at the Nuxt config:

modules: ['dayjs-nuxt'],
dayjs: {
    locales: ['fr'],
    plugins: ['relativeTime', 'utc', 'timezone'],
    defaultLocale: 'fr',
    defaultTimezone: 'Europe/Paris',
  },

The error disappears when I delete the configuration dayjs: {...}.

Node: v20.8.0
Nuxt: 3.7.4
Nuxt: SSR
dayjs-nuxt: 2.0.2

feature request: allow external plugins

for example for:

import dayjsBusinessTime from 'dayjs-business-time'

// ...
{
  plugins: [
	'isYesterday', 
	// import 
	dayjsBusinessTime,
	// or auto import
	'dayjs-business-time'
 ]
}

// ...

Cannot build in prod with Nuxt typescript typecheck option enabled

I added the module (1.1.2) to my project (Nuxt 3.5.3) and noticed my build pipeline failed with the following error:
Property 'fromNow' does not exist on type 'Dayjs'

It happens when I enable the typescript typecheck option in nuxt.config.ts and/or use the following vite config:

vite: {
  plugins: [checker({ eslint: { lintCommand: "eslint ." }, vueTsc: true })],
},

For now, I disabled both and I typecheck manually.

dayjs config in nuxt.config.ts is:

dayjs: {
  locales: ["fr"],
  plugins: ["relativeTime", "timezone", "utc"],
  defaultTimezone: "Europe/Paris",
},

useDayjs() returns an any

Hey, I tried to use your module in my project, but I can not successfully get the right types inside of my Nuxt project. It is always any, no matter what I do.

dayjs() Type error occured

I'm using [email protected]

------------------------------
- Operating System: Darwin
- Node Version:     v18.15.0
- Nuxt Version:     3.7.3
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  [email protected]
- Builder:          -
- User Config:      modules, supabase, css, stylelint, components, imports, i18n, pinia, vueuse, typescript, vite, elementPlus, dayjs, runtimeConfig
- Runtime Modules:  @nuxt/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @element-plus/[email protected], [email protected], [email protected]
- Build Modules:    -

this is occured type error like below,

스크린샷 2023-09-25 오전 8 49 51

Typescript support

Hello, no types are defined for the $dayjs plugin.
image

Do you plan to support typescript?

Nuxt 2 support

Hi! Thanks for this module

Do you think providing compatibility for Nuxt 2 could be possible? That would make this module incredible.

Check out the code for tailwindcss module for how it provides compatibility for both Nuxt 2 and 3 from a single codebase. 🙂

Error 500 when plugin extend

Hello, we have an issue when starting the Nuxt server build.

Here is how to reproduce: https://stackblitz.com/edit/nuxt-starter-h7nv5v

You'll need to run these commands in the StackBlitz terminal.

Stop the dev script using:

CTRL + C

Build the server:

yarn build

Then launch it with:

node .output/server/index.mjs

You should encounter a 500 error with the message "E is not a function".
It appears to be related to the plugin's extend function causing this error.

Doesn't work in server directory

Thanks for the module. It works for normal components/pages etc. but when I want to use the useDayjs composable in the server directory I always run into the error

[nuxt] [request error] [unhandled] [500] useDayjs is not defined

useDayjs missing from export

Can't use useDayjs when autoimport is disabled.
I've got the following error message: Missing "./dist/runtime/composables/dayjs" specifier in "dayjs-nuxt" package

I tried three ways:

import { useDayjs } from '#dayjs'
   // Cannot find module '#dayjs' or its corresponding type declarations.

import { useDayjs } from 'dayjs-nuxt'
   // Module '"dayjs-nuxt"' has no exported member 'useDayjs'.

import { useDayjs } from 'dayjs-nuxt/dist/runtime/composables/dayjs'
   // no typescript error message, but has runtime error:  ERROR  Missing "./dist/runtime/composables/dayjs" specifier in "dayjs-nuxt" package 

weekStart

Hello,
in then old @nuxtjs/dayjs module is a config parameter weekStart. It can be set like:

    dayjs: {
        locales: ['en', 'de'],
        defaultLocale: ['de', {
            weekStart: 7
        }],
        plugins: [
            'utc'
        ]
    },

Is it possible, to integrate this also in this Plug-in?

localizedFormat overrides default format

Hello,
some how the localizedFormat plugin overrides the default format. When remove this plugin and write in my code:

console.log(dayjs().utc().format())

I get this result:

2024-03-06T09:32:59Z

But when I enable it, I get:

2024-03-06T09:33:29+00:00

First I though is a dayjs issue, but in that test box it works like it should.

Any idea?

ts error

'dayjs' does not exist in type 'InputConfig<NuxtConfig, ConfigLayerMeta>'

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.