vue.py
vue.py copied to clipboard
stefanhoelzl
Build target as web component
Is it possible to build a web-component from a VueComponent Class? Vue.js can do that using
vue build --target wc <component-name>
and Brython supports web components (https://brython.info/static_doc/en/webcomponent.html) but has a different way of implementing them.
I can't figure out how to do with Vuepy's.
For example:
#test_component.py
from vue import VueComponent
class TestComponent(VueComponent):
template = "<p>This is a simple component</p>"
TestComponent.register("test-component")
How can I use the above as a modular web component in a static Brython project?
<body onLoadd="brython()">
<test-component></test-component>
</body>
Thanks!
Here is an example of what I mean:
<html>
<head>
<script src="vuepy.js"></script>
<script src="vue.js"></script>
</head>
<body onload="brython();">
<hello-world></hello-world>
<div id="app">
<img style="display: block; margin: auto;" src="loading.gif" height="50%" />
</div>
<script type="text/python">
from vue import VueComponent
class HelloWorld(VueComponent):
template = """<p>Hello World</p>"""
HelloWorld.register("hello-world")
class App(VueComponent):
template="<p>App Template</p>"
App("#app")
</script>
</body>
</html>
How can I get <hello-world></hello-world> to work without having to hardcode it in the App's template so that it's reusable?
Thanks again
I suspect there's a misunderstanding here of how Vue works.
Calling HelloWorld.register() doesn't make Vue go out and hunt down those tags for replacement.
It is adding it to Vue's list of available components.
These are then used when another component's template contains those tags.
The <hello-world> tags you have in your raw HTML are not going to be touched by Vue.
Vue will only work within the bound tag you've provided to your instantiated component, in this case when you called App("#app"), which will cause the App component to replace the <div id="app">...</div> tag with its contents.
If you change your class App template as follows, I suspect you'll have more luck
class App(VueComponent):
template = '<hello-world></hello-world>'
Failing that, I suggest reading the Vue docs to understand how components work.
@mahdi-b do you have some documentation about how to build web components with vue v2?
I only found documentation for vue v3 but vue.py currently is built on top of vue v2
