SolaraS
Solara•17mo ago•
6 replies
Delkrak

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>


<!-- 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()
Was this page helpful?