search

vuthanhbayit / vue-number-flow

2 stars 0 forks source link

readme

vue-number-flow

This Vue 3 component is a wrapper around the number-flow web component

Installation

npm install @vt7/vue-number-flow

Props

Prop Type Default
value number Required
format Intl.NumberFormatOptions undefined
locales Intl.LocalesArgument undefined
isolate boolean false
animated boolean true
respectMotionPreference boolean true
willChange boolean false
trend boolean true
onAnimationsStart function undefined
onAnimationsFinish function undefined
opacityTiming EffectTiming undefined
transformTiming EffectTiming undefined
spinTiming EffectTiming undefined

Example

Vue3

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { defineNumberFlow } from '@vt7/vue-number-flow'

defineNumberFlow()

createApp(App).mount('#app')

Nuxt3

// plugins/number-flow.client.ts
import { defineNuxtPlugin } from '#imports'
import { defineNumberFlow } from '@vt7/vue-number-flow'

defineNumberFlow()

export default defineNuxtPlugin(() => {})
// nuxt.config.ts
export default defineNuxtConfig({
  build: {
    transpile: ['number-flow']
  }
})

Use

<template>
  <vue-number-flow
    :value="1234.56"
    :locales="'vi-VN'"
    :format="{ style: 'currency', currency: 'VND' }"
  ></vue-number-flow>
</template>

<script lang="ts">
  import { VueNumberFlow } from '@vt7/vue-number-flow'
</script>