Use SFC or render functions for component definition

[klausXR]

Hello, thanks for publishing this package.

In the component definition you are using the template property to create the default div element. Compiling templates like this requires a larger build of Vue to be used so that it is able to compile it at runtime.

For most applications, this build is not used as it is not necessary to compile .vue files at runtime - they are compiled at build time.

See here for more information

• https://vuejs.org/api/options-rendering.html#template
• https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use

I would highly suggest that you either use a:

• render function to create the div as described here https://vuejs.org/guide/extras/render-function.html
• use a single-file component so that it is compiled at build time

This would allow the users of this package to deploy the smallest build of Vue ( runtime ) and not be forced to make exceptions in order to use this package.

[palerdot]

Hi @klausXR,

Thanks for raising this issue. There is another major version planned v3.0 where the library will be ported to composition api/SFC along with some dependency cleanup and a slim build. For now v2.0 is released so that users are not blocked when using Vue 3. I will address this issue on the planned v3.0 upgrade

[nick16754]

Hi @palerdot , Is there an expected delivery date for v3.0 for this library? I would love to use this in my Vue 3 webapp; however, I cannot get it to work without the vue-speedometer.es.js:312 Uncaught (in promise) TypeError: this.querySelector is not a function error in the console, despite adding a vue.config.js file to the root of the project, setting runtimeCompiler: true. Any assistance would be greatly appreciated!

[palerdot]

This already works with vue3. - https://codesandbox.io/s/blissful-firefly-he4s9z?file=/src/App.vue

Your problem is not related to vue 3. It is difficult to say without a reproducible sandbox.

[palerdot]

Maybe you are right. Your problem maybe fixed if the library is changed to SFC. But, it already works with vue 3 and you may have to configure the build for your purposes.

Is there an expected delivery date for v3.0 for this library?

There is no expected date as of now. PRs are welcome though.

[jl8n]

I'm having the same this.querySelector is not a function error and I've been unable to get vue-speedometer working with my Vue 3 SFC project despite the suggestions and examples in this thread. I'm using Vite for the dev server / compilation, and have tried enabling vue.esm-bundler.js in the Vite config with no luck.

[palerdot]

v3 is published with composition api/SFC (single file component) support. This is the recommended version for Vue 3 composition api users.