A lightweight Vue 3 composable for tracking navigation history in Single Page Applications using Vue Router. It provides a reliable way to show or hide a "back" button depending on whether the user can actually go back — even when they use the browser's back button or mobile gestures.
If you're using this inside your own app, just copy useBackButton.js
into your src/composables/
directory.
If you plan to publish it as a package:
npm install use-back-button
# or
pnpm add use-back-button
<script setup>
import { useBackButton } from '@/composables/useBackButton' // or from 'use-back-button' if installed via npm
useBackButton().trackNavigation()
</script>
This ensures your navigation stack is tracked across the entire app.
<template>
<v-btn icon @click="goBack" v-if="canGoBack">
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
</template>
<script setup>
import { useBackButton } from '@/composables/useBackButton'
const { canGoBack, goBack } = useBackButton()
</script>
You can go back more than one route by using goBackBy(n):
goBackBy(2) // Goes back two routes in history
Before calling it, you can check if it's safe:
if (canGoBackBy(2)) {
goBackBy(2)
}
These methods ensure your internal stack and browser history stay in sync.
- Tracks your app's route transitions
- Detects if the user navigated with
push
,replace
, or browser back - Lets you conditionally show back buttons only when it makes sense
- Handles
router.back()
and browser/mobile back gestures cleanly
- Uses
ref()
andcomputed()
to track a reactive stack - Uses
router.beforeEach()
to monitor transitions - Inspects
window.history.state
to tell if the user navigated backward
- Assumes you are using Vue Router 4+ (Vue 3 only)
- Must be initialized once at app startup using
trackNavigation()
GPL V.3
Made by Tony Mobily with irritation at bad back buttons and too many open browser tabs.