Passing an object as property not working in a vue.js app

[danielplappert]

Stencil version:

 @stencil/core@2.4.0

I'm submitting a:
[X] bug report
[ ] feature request
[ ] support request

Current behavior:
I’m trying to pass an object as property to my webcomponent, but it’s totally ignored. I’m using stenciljs 2.4.0 and vue.js 2.
The navigation (s. below) object is not passed into the component. The component can not be rendered, because this.navi is undefined.

Expected behavior:
The component is rendered, and this.navi contains the object passed by my vue.js app.

Steps to reproduce:

• create a webcomponent with stencil containing an object as property
• create a vue.js app
• integrate the created webcomponent into the vue.js app
• try to pass an object to the webcomponent

Related code:

I created the following page in vue:

<template>
    <my-component :navi="myNavi" ref="myComponent"></my-component>
<template>
<script lang="ts">
...
export default class MyPage extends Vue {
    private myNavi: Navigation = { title: 'My navi' }
}
</script>

The corresponding component (created with stencil 2.4.0):

import { Navigation } from '../types/navigation'

@Component({
  tag: 'my-component',
  shadow: false,
})
export class MyComponent {

  @Prop() navi: Navigation;

  render () {
    return (
      <div>
        <h1>{ this.navi.title }</h1>
      </div>
    );
  }
}

The navigation interface: (it’s part of the webcomponent bundle)

export interface Navigation {
  title: string
}

[gabrielmaschke]

Hi! According to https://custom-elements-everywhere.com/ in order to pass data such as Arrays and Objects, the syntax for Vue shoud be as follows:

<template>
    <my-component :navi.prop="myNavi" ref="myComponent"></my-component>
<template>
<script lang="ts">
...
export default class MyPage extends Vue {
    private myNavi: Navigation = { title: 'My navi' }
}
</script>

Explanation:

[bjankord]

Using the .prop bind modifier in Vue 3 will not work with stencil components that are lazy loaded. More info on the issue here:

• With Vue 3 not able to pass object as attribute anymore #2701
• Not able to pass object as attr with stencil.js generated web component vuejs/core#2343 (comment)

I have found that if you use the new output target for stencil, dist-custom-elements this generates individual files for each web component that you load yourself and are not lazy loaded by stencil. If you use these you should be able to use the .prop modifier with Vue 3, it should also work with Vue 2.

[tanner-reits]

Hey all 👋

Sorry there was never an initial reply from the team here! This doesn't sound like a direct issue with Stencil, but rather a consequence of Vue's behavior. In addition to workarounds listed in the linked issues, the Stencil team does provide an output target that will generate "wrapper components" specifically for use in Vue applications: Vue output target. You can also learn more about this integration in the Stencil docs.

Gonna go ahead and close out this issue, but hope you were able to get everything working!

[yuelinghunyu]

Using the .prop bind modifier in Vue 3 will not work with stencil components that are lazy loaded. More info on the issue here:

• With Vue 3 not able to pass object as attribute anymore #2701
• Not able to pass object as attr with stencil.js generated web component vuejs/core#2343 (comment)

I have found that if you use the new output target for stencil, dist-custom-elements this generates individual files for each web component that you load yourself and are not lazy loaded by stencil. If you use these you should be able to use the .prop modifier with Vue 3, it should also work with Vue 2.

you are right