Solara•4mo ago

Nested Vue Component import for Web

Hi all, I'm new to Solara and is planning on using Vue for interactive components for web development that include drag and drop (e.g., kanban boards). I have some experience with Vue, but I can't figure out how imports work with a Vue component. Normally I would use import ChildComponent from "./ChildComponent.vue", but that does not appear to work in the below example.

<!-- src/ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent message="Hello from Parent Component!" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

<!-- src/ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent message="Hello from Parent Component!" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
};
</script>

<style scoped>
h1 {
  color: green;
}
</style>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

# src/main.py
import solara


@solara.component_vue("ParentComponent.vue")
def ParentComponent():
    pass


@solara.component
def Page():
    ParentComponent()

# src/main.py
import solara


@solara.component_vue("ParentComponent.vue")
def ParentComponent():
    pass


@solara.component
def Page():
    ParentComponent()

5 Replies

mariobuikhuizen•4mo ago

Hi @Delkrak, this should work: https://py.cafe/mariobuikhuizen/solara-vue-sub-component

PyCafe - Solara - Solara vue sub component

Create & Share Streamlit, Dash and Python Apps Online.

mariobuikhuizen•4mo ago

You'll need to use ipyvue.register_component_from_file to register the component. Also, we need to use modules.export = in stead of export default in the templates. Note: <style scoped> is not supported, it will do the same as just <style> It's also possible to compose in Solara, wil make an example for that ...

mariobuikhuizen•4mo ago

Example of doing the composing in Solara: https://py.cafe/mariobuikhuizen/solara-compose-vue

PyCafe - Solara - Solara compose vue

Create & Share Streamlit, Dash and Python Apps Online.

DelkrakOP•4mo ago

Thanks! This is very helpful. Referencing ipyvue allowed me to find this example: https://github.com/widgetti/ipyvue/blob/master/examples/hot-reload/mywidget.py 🙂 Based on this i should be able to load a vue component like so instead on in Page:

import solara
import ipyvue


ipyvue.register_component_from_file(
    "MyChildComponent",
    "ChildComponent.vue",
        __file__)

@solara.component_vue("ParentComponent.vue")
def ParentComponent():
    pass

@solara.component
def Page():
    ParentComponent()

import solara
import ipyvue


ipyvue.register_component_from_file(
    "MyChildComponent",
    "ChildComponent.vue",
        __file__)

@solara.component_vue("ParentComponent.vue")
def ParentComponent():
    pass

@solara.component
def Page():
    ParentComponent()

GitHub

ipyvue/examples/hot-reload/mywidget.py at master · widgetti/ipyvue

Jupyter widgets base for Vue libraries. Contribute to widgetti/ipyvue development by creating an account on GitHub.

MaartenBreddels•3mo ago

Yes, in the notebook that works, but with solara-server because of the shared process (virtual kernel), we have to do that once per browser page using the trick mario showed in https://py.cafe/mariobuikhuizen/solara-vue-sub-component

PyCafe - Solara - Solara vue sub component

Create & Share Streamlit, Dash and Python Apps Online.

Gaming

Programming

Nested Vue Component import for Web