Get current zoom level reactive number

[gitHoussem]

Hello,

I am currently trying to implement my own zoom in/out buttons without relying on the default ones in the designer.
The zooming functions were easy to use zoomIn zoomOut and zoomTo (and I thank you for that).
However, I am unable to get the current zoom level number and get it to be reactive so that my input that has the zoom percentage updates automatically. (users can also zoom using the trackpad by swiping 2 fingers, so It's not something that can be hardcoded in the onClick of the zoom buttons).

Right now, here is how I am getting the zoom level

import { useVueFlow } from '@vue-flow/core';

const { getViewport } = useVueFlow();
const viewport = getViewport();
console.log(viewport.zoom);  // This will print the current zoom level

My question is : How can I get a reactive zoom level value.

Thank you !

[bcakmakoglu]

Instead of getViewport you can just use

const { viewport } = useVueFlow()

watch(() => viewport.value.zoom, (nextZoom) => {
	console.log(nextZoom)
})

[gitHoussem]

You are the best ! Thank you