Vue.js and Web Components
See original GitHub issueHey there
I’ve been trying to to get vue.js running with a custom Element (Web Component) and I cant seem to get it running. I tried to hand it a { el: ‘template’, data: { test:" test"}} but it did not work (no errors).
Where as the template consists of
<template>
<h1> {{ test }}</h1>
</template>
While the template can be resolved by vue the problem is that template is no ordinary HTML element and doesn’t have the H1 as direct child. It has however a document fragment as an attribute which itself has the children in it. Passing vue this fragment didnt work either unfortunately. A document fragment is obviously not the same as full blown element so could that be the issue?
Thank you! Alessandro
Issue Analytics
- State:
- Created 9 years ago
- Comments:24 (10 by maintainers)
Top Results From Across the Web
Vue and Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. We consider...
Read more >How To Use Web Components in Vue.js | by Marius Bongarts
While Web Components provide strong encapsulation for reusable components, Vue provides a declarative library that keeps the DOM in sync with ...
Read more >Building Web Components with Vue 3.2 - This Dot Labs
Vue 3.2 includes built-in support for defining custom Web Components while utilzing the Vue API. In this way, we get the best of...
Read more >Your First Web Component with Vue.js - Medium
Relationship between Vue.js with Web Component ... As we know, Vue.js is a JavaScript framework that can help developers in creating web ...
Read more >Developing Web Components with Vue - Passage
Web components are an exciting new technology enabling a more open web and its great to see developer-friendly tools like Vue provide direct ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
How can I package a Vue component as a web component? Couldn’t find any examples of that so far… Oh, I see the gist you provided shows how. Would be nice if this recipe was more accessible via official docs or real life examples. Cheers!
The catch here is
template
is used to created a cached DocumentFragment for reuse, whileel
is the actual element that Vue will use to render stuff. On the other hand,<template>
tags cannot be used as a render node (because browsers won’t render it at all, it only parses its content as a DocumentFragment). You need bothtemplate
andel
options for it to work.Working example: http://jsfiddle.net/fNY6J/