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"

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

Solara•2y ago•

6 replies

Delkrak

Nested Vue Component import for Web

import ChildComponent from "./ChildComponent.vue"

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

Nested Vue Component import for Web

Similar Threads

Nested Vue Component import for Web

Similar Threads

Similar Threads

Similar Threads