Skip to content

mobily-enterprises/use-back-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

useBackButton

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.


Installation

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

Usage

1. Register navigation tracking in your root component (e.g. App.vue)

<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.


2. Use it in any component to show a back button

<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>

3. Go back multiple steps

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.


What It Does

  • 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

Internals

  • Uses ref() and computed() to track a reactive stack
  • Uses router.beforeEach() to monitor transitions
  • Inspects window.history.state to tell if the user navigated backward

Caveats

  • Assumes you are using Vue Router 4+ (Vue 3 only)
  • Must be initialized once at app startup using trackNavigation()

License

GPL V.3


Author

Made by Tony Mobily with irritation at bad back buttons and too many open browser tabs.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published