Vue Snakke allows you to add a reading progress bar to your Vue 3 project.

Vue Snakke example

Step 1: Install

npm install vue-snakke

Step 2: Usage

Add the following import to your setup function:

import { useSnakke } from 'vue-snakke';

const { progress } = useSnakke();

progress is a Ref value (from 0 to 1) that will automatically update whenever the page is scrolled. You can use it to indicate page progress.


Starting the project for development:

npm start


Run through npm run [command]:

  • prettier: runs Prettier on write mode (overwrites files)
  • prettier:check: runs Prettier on check mode (useful in CI)
  • build: builds the example page (used for deployment)
  • build:lib: builds the library (used for releases)


Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.