How to create programmatically set zoom ?

[EvgenyGulyaev]

I want to change zoom to default after action in my browser. How to create programmatically set zoom ?
like

<VueFlow
      v-model="elements"
      :default-edge-options="{ type: 'smoothstep' }"
      :default-zoom="0.4"
      :min-zoom="0.2"
      :max-zoom="8"
      fit-view-on-init
      :zoom=zoom
      >
 </VueFlow>
 
 
 action() { this.zoom = 1}

[EvgenyGulyaev]

https://vueflow.dev/guide/utils/instance.html#project

Sorry, I found

[bcakmakoglu]

project is a function that does something else though.
It takes X,Y coordinates and projects them onto the graph as coordinates. It's used for stuff like taking mouse X,Y position and find out what graph X,Y positions it is at.

If you want to change the zoom level you can do it using the store ref

<script>
export default {
	data() {
   	return {
			vueFlowRef: null,
		}
    },

	mounted() {
		this.vueFlowRef.setTransform({ ...this.vueFlowRef.viewport, zoom: 1 })
	}
}
</script>

<VueFlow
      v-model="elements"
	  ref="vueFlowRef"
      :default-edge-options="{ type: 'smoothstep' }"
      :default-zoom="0.4"
      :min-zoom="0.2"
      :max-zoom="8"
      fit-view-on-init
      :zoom=zoom
      >
 </VueFlow>