KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
726 stars 87 forks source link

Vite + vue 3 different behavior after build #232

Closed leyenda closed 2 years ago

leyenda commented 2 years ago

Greetings,

I've been trying to use the component with the following code:

const showProps = (props: any) => console.info(props)
.
.
.
<tippy trigger="click" interactive>
    <button>Tippy!</button>
    <template #content="props">
      <div @click="showProps(props)">Hello</div>
    </template>
  </tippy>

I am trying to see the difference when build because when I tried to destructure the props and use { hide } the console show that it is not a function. In dev it's working as expected.

So far this is the output of my experiments:

I dont really know much about the render function but it seems like the context that vue use in this line change in dev and after build: this.$slots.content(this)

Thank you in advance

KABBOUCHI commented 2 years ago

published a new version v6.0.0-alpha.47, plz can u try it?

leyenda commented 2 years ago

Hi, it is still happening,

"dependencies": {
    "vue": "^3.2.25",
    "vue-tippy": "^6.0.0-alpha.47"
  },

After a clean vite setup I change App.vue with this:

<script setup lang="ts">
import { Tippy } from 'vue-tippy'
import 'tippy.js/dist/tippy.css'
const showProps = (props: any) => console.info(props)
</script>

<template>
  <tippy trigger="click" interactive>
    <button>Tippy!</button>
    <template #content="props">
      <div @click="showProps(props)">Hello</div>
    </template>
  </tippy>
</template>

Steps to reproduce: npm run dev The props have the expected keys and functions (hide, ...etc)

npm run build
npm run preview

The props only has an underscore key "_".

KABBOUCHI commented 2 years ago

I published a new version v6.0.0-alpha.50, please can you try it?

image
leyenda commented 2 years ago

Hi!, I am sorry for my late response.

It's working now, thank you so much, also for teaching me a new concept of vue (expose).