Home

So what I’d like to do if possible is say I have a component that shows a number, say

States : 50

Now in the browser I’d like to animate this by using something like countup.js to count the number from 0 to 50, but in the rendered static HTML i’d like the value to always be 50. Maybe do something like:

.statistic
  .copy States
  .value(v-if="browser") {{ state }}
  .value(v-else) 50

this has data () return this.browser = process.BROWSER_BUILD

When I try and do something like this I always get errors and warnings mostly that particularly are:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Is this possible to do at all? This would be great for SEO purposes.

Here is some actual code I’ve tried to do this with:

i-count-up.value(v-if="browser",:start=0,:end="metros[key]") 0
.value(v-else) {{ metros[key] }}