Graphic Walker
Client Side
Framework integration
Using Graphic Walker in Vue

Using GraphicWalker in Vue

The following is an example of using GraphicWalker in Vue.

npm install @kanaries/graphic-walker react react-dom styled-components
<script setup lang="ts">
import { embedGraphicWalker, IGWProps } from '@kanaries/graphic-walker';
import { onBeforeUpdate, onMounted, ref } from 'vue'
 
const props = defineProps<IGWProps>()
 
const container = ref<HTMLElement | null>(null)
 
function renderGW () {
    if (!container.value) {
        return
    }
    embedGraphicWalker(container.value!, {
        ...props,
    });
}
 
onMounted(() => {
    renderGW()
})
 
onBeforeUpdate(() => {
    renderGW()
})
</script>
 
<template>
    <div ref="container"></div>
</template>
 
<style scoped></style>