@vt7/vue-number-flow
v0.0.4
Published
This Vue 3 component is a wrapper around the [number-flow](https://github.com/barvian/number-flow) web component
Downloads
102
Maintainers
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(() => {})
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>