Vue3 Support

[loren138]

Is there a timeline for upgrading v-tooltip and v-popover to support Vue3?

Vue3 is currently at Release Candidate 5 and is supposed to be released soon.

[paulshen]

If you're trying out Vue 3 (like I am), I created a quick fork that seems to have v-tooltip directive support. I honestly haven't tested it much besides confirming that tooltips show up again but if you're desperate, you can try it out 😄

https://github.com/paulshen/v-tooltip/tree/vue3

You can use it in your project by updating your package.json

"dependencies": {
  "v-tooltip": "https://github.com/paulshen/v-tooltip.git#vue3"
}

[davorpeic]

Hey @paulshen your fix is working with Vue3, we are using your fork, so if you plan to delete it please let me know so I can fork it to our side. Any plans to push for PR :) ?

[PerpetualWar]

@Akryum will there be a version for Vue 3 , some people are saying this is abandonware?

[xtel-hilmar]

Just noticed that versions above 2 are not working without webpack :(

Needed to change my script from

<script src="https://unpkg.com/v-tooltip"></script>

to

<script src="https://unpkg.com/v-tooltip@2.1.2/dist/v-tooltip.min.js"></script>

I think its only the "process.env.NODE_ENV" references...

[mimoo]

the fork doesn't work for me : (

[adamreisnz]

Any progress on an official Vue 3 version?

[websilone]

the fork doesn't work for me : (

Same here :( The fork is not working for me either.

@Akryum can you let us know if you plan on supporting Vue 3 or not ? Thx

[fylzero]

For @paulshen fork to work make sure you are including the reference to the tooltip package in dependencies still.

"devDependencies": {
    "v-tooltip": "^2.1.2",
},
"dependencies": {
    "v-tooltip": "https://github.com/paulshen/v-tooltip.git#vue3"
}

Then do a npm update

Worked for me.

[lindseybradford]

The above fix worked nicely.

I'm sure full support is close, but would it be possible to add this Vue 3 exception to the docs in the meantime? I totally missed this and spent about 40 minutes questioning my sanity because console.log(VTooltip) was returning a healthy installation log. 😖

[tarponjargon]

@paulshen thanks for doing that and sharing it!

[mathiash98]

For @paulshen fork to work make sure you are including the reference to the tooltip package in dependencies still.

"devDependencies": {
    "v-tooltip": "^2.1.2",
},
"dependencies": {
    "v-tooltip": "https://github.com/paulshen/v-tooltip.git#vue3"
}

Then do a npm update

Worked for me.

Thanks for the good work @paulshen

I can confirm that it's working without referencing v-tooltip in devDependencies.
In general for people seeing this: Referencing a github page directly in package.json is not good at all, you will then have no control over versioning and stuff can break.

• I would recommend you to pull the great work and store it locally
  - You only need:
  - Package.json without devDependencies
  - dist folder
  - types folder
  - Set you root package.json to reference the folder by: "v-tooltip": "file:./customDeps/v-tooltip" -> npm/yarn install and it should work

[sjblasko]

The @paulshen version of the v-tooltip is working us but attempting the v-popover component results in a runtime errors:

TypeError: Cannot read property '_c' of undefined
    at Proxy.bi (v-tooltip.esm.js:4142)
    at kt (runtime-core.esm-bundler.js:732)
    at runtime-core.esm-bundler.js:4225
    at n (reactivity.esm-bundler.js:42)
    at l (reactivity.esm-bundler.js:17)
    at I (runtime-core.esm-bundler.js:4208)
    at L (runtime-core.esm-bundler.js:4167)
    at P (runtime-core.esm-bundler.js:4127)
    at y (runtime-core.esm-bundler.js:3745)
    at k (runtime-core.esm-bundler.js:3927)

and

TypeError: Cannot read property 'parentNode' of undefined
    at Proxy.mounted (v-tooltip.esm.js:3577)
    at We (runtime-core.esm-bundler.js:154)
    at Ge (runtime-core.esm-bundler.js:163)
    at Array.t.__weh.t.__weh (runtime-core.esm-bundler.js:1934)
    at gt (runtime-core.esm-bundler.js:355)
    at K (runtime-core.esm-bundler.js:4830)
    at mount (runtime-core.esm-bundler.js:3046)
    at Object.Ga.t.mount (runtime-dom.esm-bundler.js:1234)
    at Module.333b (main.js:7)
    at n (bootstrap:19)

I'm assuming that @paulshen effort was specific to making the v-tooltip working and not necessarily to have the v-popover working. Has anybody else gotten this to work? We're unfortunately getting pretty desperate for the vue3 component support and the last message I've seem from @Akryum about the topic is that a release will be "Very soon!". Does anybody have news about the alpha being close to done and the potential for this component officially be moved to vue3?

Sample code used:

<v-popover offset="16">
    <!-- This will be the popover target (for the events and position) -->
    <button class="tooltip-target b3">Click me</button>

    <!-- This will be the content of the popover -->
    <template #popover>
      <p>Message</p>
    </template>
  </v-popover>

[Akryum]

https://twitter.com/Akryum/status/1383145389570789378

[Akryum]

Vue 3 support is here with v-tooltip@4.0.0-alpha.1

yarn add v-tooltip@vue3

[Akryum]

Learn more on v-tooltip v3 & v4

[Cristiandi]

@Akryum TY 👍🏻