I would like to use a Vue component library in Python. For this, I wanted to use ipymuvue rather than ipyvuetify or ipyvue because I was not able to use JS libraries in these widgets.

Can I use some external libraries on ipyvue or ipyvuetify into Panel?

So I tried to use ipymuvue in Panel, here is the result:

from ipymuvue.widgets import VueWidget
import panel as pn

class Widget(VueWidget):
    def __init__(self):
        super().__init__(template=r"""
            <step-2 />
        """, components={
            "step-2": r"""
                <script setup>
                import { reactive, ref } from 'vue'

                const counter = reactive({ count: 0 })
                const message = ref('Hello World!')
                </script>

                <template>
                    <h4>{{ message }}</h4>
                    <p>Count is: {{ counter.count }}</p>
                </template>
            """
        })

w = Widget()

pn.template.FastListTemplate(site="Panel", title="Panel", main=[w], header_background="black", header_color="white", ).servable();

panel serve example.ipynb --autoreload

enter image description here
enter image description here

I searched on different Github threads, but realized that this community remains niche and it is difficult to find information.