How to import individual shapes in vue3 ?

[geminigeek]

hi,

i am trying to use konva , in astro with vue, i do not want to bind it to the whole vue app , can anyone help me how to use it in just one component ?
i want to use it like this

related to this #144 (comment)

<script setup>
import { ref } from "vue"
import { VCircle, VLayer, VStage } from "vue-konva"
const configKonva = ref({
  width: 200,
  height: 200,
})
const stage = ref()
const layer = ref()
const circle = ref()
const configCircle = ref({
  x: 100,
  y: 100,
  radius: 70,
  fill: "red",
  stroke: "black",
  strokeWidth: 4,
})
</script>
<template>
  <v-stage ref="stage" :config="configKonva">
    <v-layer ref="layer">
      <v-circle ref="circle" :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

[lbhopper]

maybe try something like this? I'm not using Astro, but I have vue-konva packaged with my Vue3 project. Not sure what you're targeting by setting null refs.

<template>
  <v-stage :config="stageConfig">
    <v-layer>
      <v-rect :config="rectConfig" />
    </v-layer>
  </v-stage>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { Stage, Layer, Rect } from "@vue-konva/vue-konva";

export default defineComponent({
  components: {
    "v-stage": Stage,
    "v-layer": Layer,
    "v-rect": Rect,
  },
  setup() {
    const stageConfig = reactive({
      width: 500,
      height: 400,
    });

    const rectConfig = reactive({
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      fill: "blue",
      draggable: true,
    });

    return { stageConfig, rectConfig };
  },
});
</script>