nuxt-formkit-tempo v1.0.1

Demo

Play with it on Stackblitz

Quick Setup

1. Install the module in your Nuxt application with one command:

npx nuxi@latest module add nuxt-formkit-tempo

That's it! You can now use nuxt-formkit-tempo in your Nuxt application ✨

Usage

<template>
  <div style="display: grid; height: 100vh; width: 100vw; place-items: center;">
    <ClientOnly>
      {{ newDate }}
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
const now = new Date()

const newDate = useFormat(now, 'full')
</script>

Configuration

The nuxt-formkit-tempo module allows you to add prefixes and aliases to the utilities and helpers provided by the @formkit/tempo package.

Below is how you can configure and use them in your Nuxt 3 project:

export default defineNuxtConfig({
  modules: ['nuxt-formkit-tempo'],
  devtools: { enabled: true },
  tempo: {
    prefix: 'use',
    alias: [
      ['format', 'formatDate'],
    ],
  },
})

then in your component:

<template>
  <div style="display: grid; height: 100vh; width: 100vw; place-items: center;">
    <ClientOnly>
      {{ newDate }}
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
const now = new Date()

const newDate = useFormatDate(now, { date: 'medium', time: 'short' })
</script>

Types

Below are the types of the tempo config:

Contribution