Delkrak Posts - Answer Overflow

Delkrak

•Created by Delkrak on 9/15/2024 in #questions-issues

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()

7 replies

Gaming

Programming