[Vue warn]: Unknown custom element: <vaadin-grid>

[idoor88]

Hi all,
I followed this example:
https://vaadin.com/vaadin-documentation-portlet/elements/integrations/integrations-vuejs.html
installed and imported vaadin-grid libaray into my vue project, and in my index.html I put this in the head section as required by the above example:

<script src="static/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

In the dataview.vue file, I have this template:

1. `<template id="data-template">
2. <div>
3.  <vaadin-grid items='[{"name": "John", "surname": "Lennon", "role": "singer"}, {"name": "Ringo", "surname": "Starr", "role": "drums"}]'>
4.   <vaadin-grid-column>
5.     <template class="header">Name</template>
6.     <template>[[item.name]]</template>
7.   </vaadin-grid-column>
8.   <vaadin-grid-column>
9.     <template class="header">Surname</template>
10.     <template>[[item.surname]]</template>
11.   </vaadin-grid-column>
12.   <vaadin-grid-column>
13.     <template class="header">Role</template>
14.     <template>[[item.role]]</template>
15.   </vaadin-grid-column>
16. </vaadin-grid>
17. </div>
18. </template>`

But I got this error:

[Vue warn]: Unknown custom element: "vaadin-grid"
did you register the component correctly? For recursive components, make sure to provide the "name" option.

I am begging for help.
Thanks very much

[tmpjr]

Any update on this issue? I'm having the identical issue.

[yuriy-fix]

Dear @tmpjr ,

Could you please provide us with real live example, so we will be able to take a precise look on it, debug and fix it?

[tmpjr]

I'll do my best. It's difficult on CodePen/Fiddle to reproduce since you need webpack, npm, and .vue files to reproduce. I've not been able to get an example working at all in codepen thus far.

[tmpjr]

Hi @YuriyVaadin

I was unable to get anything working on codepen/fiddle or whatever since a lot of this requires webpack and is just too complex for live editors. I did, however, create a fresh repository that you can pull down and just run a few commands to try it out.

https://github.com/tmpjr/vue-vaadin-demo

Thanks!

[yuriy-fix]

Dear @tmpjr

Unfortunately our VueJS guru is out of the office. I have tried to build and run the app, but I am facing the framework related errors and issues. Can I ask you to provide me with fully functional example and detailed instructions how to use it? I am sorry for this inconveniences, but for the current moment it is not possible to deepen my knowledge into VueJS.

[kunalkundaje]

This warning is thrown because Vue doesn't know which component to map the <vaadin-grid> tag to.

Since the Vaadin Grid is a custom element and not a Vue component, you can instruct Vue to ignore this element tag using the ignoredElements config option:
https://vuejs.org/v2/api/#ignoredElements

Vue.config.ignoredElements = ['vaadin-grid']

[tmpjr]

Thanks, @kunalkundaje

That gets rid of the warning but I just see an empty grid. At this point we've moved onto another datagrid solution.

[jouni]

The original documentation article for Vue integration is no longer on our main website, since it’s not something we officially support at the moment. The article is now moved to https://github.com/vaadin/vaadin-core/wiki/Vue.js-Integration

Please contribute there if you have any additions and/or corrections to the content. Our team at Vaadin doesn’t really have any real experience with Vue, so all help is appreciated!

[web-padawan]

For anyone interesting in using Vaadin components in Vue, we now have a tutorial:
https://vaadin.com/tutorials/using-web-components-in-vue

Also, with the Vue CLI version 3 and above, there is no more warning mentioned above.
Closing this issue as outdated.

[leonheess]

@kunalkundaje @web-padawan Wait, so the official way of mitigating this Warning is not to register the components but to disable the warning?