Vue 3 Support

[Arun Kumar]

v2.x is compatible with Vue 3. Please use latest v2.x if you are using Vue 3

Stackblitz reference - https://stackblitz.com/edit/vue-kc8bj3?file=src%2FApp.vue
CodeSandbox reference - https://codesandbox.io/s/blissful-firefly-he4s9z?file=/src/App.vue

There is a v3 planned with dependency cleanup, slim build and porting the library to composition api/SFC

[Dirk Gaston]

Hello!

For some reason I am getting a "this.querySelector is not a function" error and the component will not load. This happens only with two of my VUE 3 projects. I made sure that v2 is installed which is supposed to have VUE 3 support but the same error keeps popping up. I did try using it in a VUE 2 project however and it worked without any issues.

Any ideas how I could fix it?

[Arun Kumar]

I made sure that v2 is installed which is supposed

Vue 2 is not needed for the recent version as Vue 3 support is enabled.

It is difficult to debug without a reproducible repo/codesandox.

You can see an example of Vue 3 repo at the top of this issue where things are working fine (https://codesandbox.io/s/blissful-firefly-he4s9z?file=/src/App.vue)

Need a reproducible codesandbox/repo to give more inputs on this issue.

[Dirk Gaston]

OK, I just tried again with a new VUE 3 project and I am getting the same issue, so I uploaded the repo:

https://github.com/DirkGaston/speedometer-test-vue3

Note that I uploaded it to Codesandbox and... for some reason IT WORKS there. I don't understand, I have tried with several project, tried in Chrome, Edge, Firefox... and I keep getting the same error and the component will not display.

Here is the Codesandbox but I'm not sure it will be of much help since it actually works there:

https://codesandbox.io/s/epic-hellman-3ynmzl?file=/src/main.js

[Arun Kumar]

The problem is you have to enable runtimeCompiler as you are using deprecated vue-cli. This is automatically enabled for online code editors.

In your vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
// enable this; you have to migrate to newer https://github.com/vuejs/create-vue for newer projects
  runtimeCompiler: true
})

As mentioned in vue docs, you have to migrate to newer vite based https://github.com/vuejs/create-vue for not adding the extra runtimeCompiler. You can read more about vue runtimeCompiler on this quirk.

[Arun Kumar]

Closing this issue as this issue is for announcement/reference purposes only. Please open new issue for local setup related problems.

[MattDuart]

The problem is you have to enable runtimeCompiler as you are using deprecated vue-cli. This is automatically enabled for online code editors.

In your vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
// enable this; you have to migrate to newer https://github.com/vuejs/create-vue for newer projects
  runtimeCompiler: true
})

As mentioned in vue docs, you have to migrate to newer vite based https://github.com/vuejs/create-vue for not adding the extra runtimeCompiler. You can read more about vue runtimeCompiler on this quirk.

I'm having the exact same issue, using version 2.0.0 and Quasar:
Build mode............. spa
Pkg quasar............. v2.14.1
Pkg @quasar/app-vite... v1.7.1
Pkg vite............... v2.9.16

As far as I understood this shouldn't happen with vite... Any ideas?

[MattDuart]

Sorry, I'll open a new issue...