Nuxt Formkit Tempo

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 ✨.

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:

Example 1 with alias + prefix:

<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>

Example 2 with prefix only:

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

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 = useFormat(now, 'full')
</script>

Example 3 without prefix nor alias:

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

<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 = format(now, 'full')
</script>

Types

Below are the types of the tempo config:

Prop	Type	Description	Default
prefix	string	Keyword placed infront of the utilities and helpers.	''
alias	[string, string][]	A unique name assigned to a utility to avoid naming conflicts with other third-party packages and libraries.	[]

Contribution

Local 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

Happy hacking ✨.