Skip to main content
This composable is deprecated. Use useVueFlow instead, which provides all viewport functions directly.
useZoomPanHelper provides functions for manipulating the viewport, including zooming, panning, and fitting views. This composable has been deprecated in favor of using useVueFlow directly.

​
Migration

Instead of using useZoomPanHelper, use useVueFlow which includes all the same functionality: 
<script setup>
import { useZoomPanHelper } from '@vue-flow/core'

const { fitView, zoomIn, zoomOut } = useZoomPanHelper()
</script>

​
Signature

function useZoomPanHelper(vueFlowId?: string): ViewportFunctions

​
Parameters

​
vueFlowId
string
Optional ID of the Vue Flow instance to control.

​
Return Value

Returns a ViewportFunctions object with the following methods:
​
fitView
(params?: FitViewOptions) => Promise<boolean>
Fits the view to show all nodes with optional padding
​
zoomIn
(options?: TransitionOptions) => Promise<boolean>
Zooms in the viewport
​
zoomOut
(options?: TransitionOptions) => Promise<boolean>
Zooms out the viewport
​
zoomTo
(zoomLevel: number, options?: TransitionOptions) => Promise<boolean>
Sets zoom to a specific level
​
setViewport
(transform: ViewportTransform, options?: TransitionOptions) => Promise<boolean>
Sets the viewport transform (position and zoom)
​
setTransform
(transform: ViewportTransform, options?: TransitionOptions) => Promise<boolean>
Deprecated - Use setViewport instead
​
getViewport
() => ViewportTransform
Gets the current viewport transform
​
getTransform
() => ViewportTransform
Deprecated - Use getViewport instead
​
setCenter
(x: number, y: number, options?: SetCenterOptions) => Promise<boolean>
Centers the viewport on specific coordinates
​
fitBounds
(bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>
Fits the viewport to specific bounds
​
project
(position: XYPosition) => XYPosition
Converts screen coordinates to flow coordinates

​
Example (Deprecated)

<script setup>
import { useZoomPanHelper } from '@vue-flow/core'
import { onMounted } from 'vue'

// ⚠️ This is deprecated - use useVueFlow instead
const { fitView, zoomIn, zoomOut, setCenter } = useZoomPanHelper()

onMounted(async () => {
  await fitView({ padding: 0.2 })
})

function handleZoomIn() {
  zoomIn({ duration: 300 })
}

function handleZoomOut() {
  zoomOut({ duration: 300 })
}

function centerView() {
  setCenter(0, 0, { zoom: 1 })
}
</script>
Use useVueFlow instead, which provides the same functionality: 
<script setup>
import { useVueFlow } from '@vue-flow/core'
import { onMounted } from 'vue'

const { fitView, zoomIn, zoomOut, setCenter, viewport } = useVueFlow()

onMounted(async () => {
  await fitView({ padding: 0.2 })
})

function handleZoomIn() {
  zoomIn({ duration: 300 })
}

function handleZoomOut() {
  zoomOut({ duration: 300 })
}

function centerView() {
  setCenter(0, 0, { zoom: 1 })
}

// Additional benefits: direct access to state
console.log('Current zoom:', viewport.zoom)
</script>

​
Notes

  • This composable is maintained for backward compatibility but will be removed in a future major version
  • All functionality is available in useVueFlow with additional benefits
  • Using useVueFlow gives you access to the entire store, not just viewport functions

Build docs developers (and LLMs) love

Get started for freeTalk to us