Webcomponents (vue build –target wc) used in another Vue project -> problems with events (copy from vuejs forum)

[PsySolix]

Hi there!

So I’m struggling for this for a while. I can’t seem to get a simple click event working inside a nested webcomponent. The webcomponent ListItem & List is exported via

vue-cli-service build --target wc --name wk --dest ./build/ 'src/components/*.vue

ListItem.vue code:

<template>
  <li
    class="list-group-item"
    :class="classes"
    @click="itemClick">
    <slot></slot>
  </li>
</template>
<script>
export default {
  name: 'ListItem',
  computed: {
    attributes() {
      return {
        'aria-disabled': this.disabled,
      };
    },
    classes() {
      return {
        active: this.active,
        disabled: this.disabled,
        'list-group-item-action': this.action,
      };
    },
  },
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    action: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    itemClick(e) {
      this.$emit('click', { e, vm: this });
      this.$emit('tick', { e, vm: this });
    },
  },
};
</script>

Those webcomponents (ListItem/List) are then used in another Vue project. As such:

    <wk-list>
      <wk-list-item
        active
        @click="clicked"
      >
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">
            List group item heading
          </h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">
          Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
          risus varius blandit.
        </p>
        <small>Donec id elit non mi porta.</small>
      </wk-list-item>
      <wk-list-item
        action
        @click="clicked"
      >
        TEST
      </wk-list-item>
    </wk-list>

And the layout shows, etc.
But the click never triggers… (I tried working with event modifiers.native / .native.stop/ .native.prevent/ .native.prevent.stop, to no avail)

Can someone point me in the right direction please? Thanks in advance!

**PS: it does trigger in the normal vue project, project where they are build to webcomponents **

[JohanSchobben]

Did you try it with a "vanilla" custom event? It should work both in vue and as a web component.

your code will look like this:

itemClick(e) {
      const tickEvent = new CustomEvent('tick', {bubbles: true, composed: true, 
            detail: {
                  vm: this
}})
      this.$el.dispatchEvent(tickEvent)
    }

[graciano]

Having a similar issue. But I'm not using a native element. Tried using custom events (example below). When checking the code I realised it's only one-way: the event can be listened by the user of the web component. I couldn't find in the code the other way around: when the user could trigger an event. Is this supported? If not, could I try to make a PR for it?

Here's a sample of what I tried.

Web Component Package

<template
  @play="play"
  @pause="pause"
  >
  <div id="app">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: 'App',
  // ...
  methods: {
    play() { store.playAction() },
    pause() { store.pauseAction() }
  }
  // ...
}
</script>

Using the web component

<template>
  <div class="">
    <button type="button" @click="clickButton">Play</button>
    <web-component-player ref="player" />
  </div>
</template>

<script>
export default {
  name: 'Player',
  methods: {
    clickButton () {
      const playEvent = new CustomEvent('play', {
        bubbles: true,
        composed: true,
        detail: {}
      })
      this.$refs.player.dispatchEvent(playEvent)
    }
  // ...
}
</script>

Edited for clarity in example