nkoik / vue-animated-number Goto Github PK

it bring up this error whatever i do.

vue.esm.js?a026:628 [Vue warn]: Failed to mount component: template or render function not defined.

I installed it with VueCLI3, it is working very well indeed, but when I move to NuxtJS, the package cause the whole project error:

SyntaxError
Unexpected identifier

In plugins/number-animation.js

import Vue from 'vue'
import VueNumber from 'vue-number-animation'

Vue.use(VueNumber)

In nuxt.config.js

plugins: [
    'plugins/vue-masonry-css',
    'plugins/number-animation'
  ],

plz i have an error when calling this.$refs.count0.play();
i get an error saying "TypeError: this.$refs.count0.play is not a function"

Dependabot cannot update gsap to a non-vulnerable version

The latest possible version that can be installed is 2.1.3 because of the following conflicting dependency:

[email protected] requires gsap@^2.0.1
The earliest fixed version is 3.6.0.

i will upgrade one of my project who have your module, do you plan to make it work with vue 3

Normally you can add .toLocaleString('en') to display the number with commas inside.

Ex:

1000 => 1,000

I am currently using a workaround by modifying the source Number.vue to display:

parseFloat(tweenedNumber).toLocaleString('en',{ minimumFractionDigits: 2 })

Hi,

The component works just fine. However, it generates a lot of warnings in the console:

Even though the messages are quite clear, I couldn't fix these warnings myself. Is there anyway to fix it? This is my use case:

<template>
<number :class="{bold: reached}"
                :from="0"
                :to="gamesPlayed"
                :duration="5"
                :format="numberFormat"
                @complete="completed"
                easing="Power4.easeOut"/>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      gamesPlayed: 10_000,
      reached: false
    }
  },
  methods: {
    completed() {
      this.reached = true;
    },
    numberFormat(number) {
      return number.toLocaleString('pt-BR', {maximumFractionDigits: 0});
    }
  }
}
</script>

<style>
.bold {
  font-weight: bold;
}
</style>

Thanks in advance.

Trying to use this module with a new Laravel / Jetstream set up and having trouble importing it correctly.

I'm importing it to the Vue component directly like so:

<script>
import VueNumber from "vue-number-animation";

export default {
  components: {
    VueNumber,
  },
  …
}
</script>

<template>
  …
  <number
    ref="count"
    @complete="countComplete"
    :from="0"
    :to="5"
    :format="theFormat"
    :duration="5"
    :delay="1"
    easing="Expo.easeInOut"
  />
  …
</template>

But when within the template, it presents as an anonymous component and an unmounted component in the inspector.

From inspector:

<!----> == $0
</div>

From Vue devtools:
<Anonymous Component>

I need to put a comma in the number, is that posible?

Maybe in the format put something like return number.toFixed(-3);

Thanks!

Hi,

Great work on the package. I had a question about number formating:
I would like my numbers to include thousand-seperators (e.g: 10.000 instead of 10000).

It seems to not be possible with the format function since it probably requires a number and not a string:

theFormat(number, numberOfDecimals) {
    return number.toFixed(numberOfDecimals).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

Any support for this or hacks around this so I can include the thousand-seperator?

Hello, thanks for your work!

I have an issue when i want to use a dynamic ref

 <div class="number" v-for="(nb, index) in numbers" :key="index">
              <number
                :ref="nb.name"
                :from="0"
                :to="nb.number"
                :format="theFormat"
                :duration="2"
                :delay="0.5"
                animationPaused
                easing="Power1.easeIn"
              />

export default {
  data() {
    return {
      numbers: {
        participants: {
          name: "number1",
          icon: "icon1",
          number: 2000,
          plus: true,
          title: "Participants last year",
        },
        speakers: {
          name: "number2",
          icon: "icon2",
          number: 80,
          plus: true,
          title: "Speakers participating",
        },
        days: {
          name: "number3",
          icon: "icon3",
          number: "2 days",
          plus: false,
          title: "Lorem ipsum set nec mercitur",
        },
        lorem: {
          name: "number4",
          icon: "icon4",
          number: "45",
          plus: true,
          title: "Lorem ipsum set nec mercitur",
        },
      },
    };
  },
}

Do you have a solution for this?
Or is there a solution to play all the numbers without specifying a ref?

Thank you

It would be great to adjust the logic so that the delay is applied every time after the restart() method is called.
This could be added by default or as an option so the countdown could stay consistent.

Also at this point it would make be good to also add @delayFinished

even if speccing formatting to use more decimals. It still rounds to the 6'th decimal place.

eg. try showing
0.0000181234

it gets truncated to
0.0000180000

theFormat(number) {
   return number.toFixed(10);
},

Hi,
would it be possible to implement a function to tell whether the element is visible and to start the animation right after?

While our project is not yet ready to upgrade to Vue 3, I've tried upgrading this library to 2.x.x - however, despite my best efforts, the build fails with the following messages:

WARNING in ./node_modules/vue-number-animation/dist/index.es.js 1411:18-33
export 'defineComponent' (imported as 'defineComponent') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)

WARNING in ./node_modules/vue-number-animation/dist/index.es.js 1448:18-26
export 'reactive' (imported as 'reactive') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)

WARNING in ./node_modules/vue-number-animation/dist/index.es.js 1477:4-9
export 'watch' (imported as 'watch') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)

WARNING in ./node_modules/vue-number-animation/dist/index.es.js 1485:9-15
export 'toRefs' (imported as 'toRefs') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)

WARNING in ./node_modules/vue-number-animation/dist/index.es.js 1490:17-18
export 'h' (imported as 'h') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)

5 WARNINGS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

ERROR in ./node_modules/vue-number-animation/node_modules/vue-demi/lib/index.mjs 2:0-84
Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.esm.js' in '/node_modules/vue-number-animation/node_modules/vue-demi/lib'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

webpack compiled with 1 error and 10 warnings

I've made sure I have the latest patch version of both vue-number-animation (2.0.2), and vue@^2.7.0 (2.7.16). I also tried to install @vue/composition-api, but of course since our project is already using Vue 2.7, it refuses to install.

Is there something I'm doing wrong?

Hi,

as per VueJs recommendation

Component names should always be multi-word, except for root App components, and built-in > components provided by Vue, such as or .

source

Hi, I am using nuxt 3 (3.0.0-rc.11) when i try to run a webpage (yarn dev) with this component there is no error but when i try to build. It gives me error

My plugin file is this

import VueNumber from 'vue-number-animation';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueNumber);
});

Error is

How can i fix this can anyone help me?