npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-history-state

v0.14.0

Published

History State Module for Vue3 and Nuxt3

Downloads

1,387

Readme

Vue History State Plugin

History state plugin for Vue 3 and Nuxt 3

npm version License: MIT

Vue History State Plugin is usefull for restoring state when users press "Back" or "Foward".

This plugin is a new version of nuxt-history-state ported to work with Vue 3 and Nuxt 3.

Features

  • Restore a last state when going forward or back.
  • Restore a state when reloading.
  • Restore a last state when going forward or back after reloading.

Supported Vuersion

  • Vue 3.x + Vue-Router 4.x
  • Nuxt 3.x

If you want to work with Nuxt 2, you need to use nuxt-history-state.

Install

Using npm:

npm install vue-history-state

Setup

Vue 3

import HistoryStatePlugin from 'vue-history-state'

...

app.use(HistoryStatePlugin, {
  /* optional options */
})

Nuxt 3

export default defineNuxtConfig({
  modules: [
    "vue-history-state/nuxt"
  ],
  historyState: {
    /* optional options */
  }
})

Options

maxHistoryLength

Sets the maximum length of hisotries that can hold data.

When this option is not set, it depends on a max history length of a browser.

Default: undefined

overrideDefaultScrollBehavior

Indicates whether this module override a default scroll behavior of the router.

If you set this option to true, it manages a scroll behavior by using own saved position.

Default: true

scrollingElements

Indicates to which element the overrode behavior is applied.

If you set this option to a selecter, it applies the scrolling to the selector, in addition to the window.

Default: undefined

Usage

Reactivity API

If you want to backup data, you have to define a onBackupState lifecycle method.

import { useHistoryState, onBackupState } from 'vue-history-state'

const historyState = useHistoryState()

// Restore data
const data = reactive(historyState.data || { key: "value" })

// Fetch or restore data
const { data } = useAsyncData(() => $fetch('/api/data'), {
    default: () => (historyState.data || { key: 'value' }),
    immediate: !historyState.data,
    server: false,
})

// Backup data
onBackupState(() => data)

New SSR-friendly reactivity APIs (experimental)

// Backup and restore data
const data = useRestorableState({
  key: "value"
})

// Backup, restore and fetch data
const data = useRestorableState({
  mode: "create",
  key: "value",
}, ({ visited, info }) => {
  if (!visited) {
    if (info?.mode === "update" || info?.mode === "delete") {
      return $fetch("api.example.com").then(res => ({
        ...res,
        mode: info.mode,
      }))
    }
  } else {
    if (info?.refresh) {
      return $fetch("api.example.com")
    }
  }
})

Options API

If you want to backup data, you have to define a backupData lifecycle method.

export default {
  // Restore data
  data() {
    return this.$historyState.data || { key: "value" }
  }
  // Backup data
  backupData() {
    return this.$data
  }
}

API

HistoryState

action

A action type that caused a navigation.

  • navigate: When a new page is navigated.
  • reload: When a page is reloaded.
  • push: When a history.push is called.
  • back: When a back navigation is occurred.
  • forward: When a forward navigation is occurred.

By default this method returns basically 'navigate' on server. But many browsers send cache-control='maxage=0' when reloading. It heuristically returns 'reload' then.

visited: boolean

If the action is back, forward or reload, this property returns true.

canGoBack: boolean / canGoForward: boolean

You can test if you can go back/forward.

This method cannot be used on the server.

page: number

A current page number (an integer beginning with 0).

This method always returns 0 on server.

data: object?

A backup data.

If you want to clear the backup data, you set undefined to this property.

This method always returns undefined on server.

info: object?

A transferred data from the previous page.

This method always returns undefined on server.

length: number

A history length.

This method cannot be used on server.

getItem(page): HistoryItem?

You can get a location and data of the specified page number.

If you set 'overrideDefaultScrollBehavior' option to true, the item has scrollPositions property.

This method cannot use on server.

getItems(): HistoryItem[]

You can get a list of item.

This method cannot be used on server.

findBackPage(location): number?

You can get a page number of the first matched history, searching backward in the continuous same site starting at the current page. If a history state is not found or is not in the continuous same site, this method will return undefined.

If the partial option sets true, it matches any subset of the location.

This method cannot be used on server.

const page = historyState.findBackPage({
    path: '/test'
    // hash: ...
    // query: ...
    // name: ...
    // params: ...
    // partial: true (default: false)
})
if (page != null) {
    historyState.getItem(page).data = undefined

    // go back to the page in site.
    const router = useRouter()
    router.go(page - historyState.page)
}

push(url: string, info?: Record<string, any>)

This method is almost the same as router.push(url).

If you set info parameter, it passes info data (like a message) to the next page.

back(info?: Record<string, any>)

This method is almost the same as window.history.back().

If you set info parameter, it passes info data (like a message) to the backwarded page.

forward(info?: Record<string, any>)

This method is almost the same as window.history.forward().

If you set info parameter, it passes info data (like a message) to the forwarded page.

goToPage(page: number, info?: Record<string, any>)

This method is almost the same as window.history.go(page - nav.page).

If you set info parameter, it passes info data (like a message) to the page.

reload(info?: Record<string, any>)

This method is almost the same as window.location.reload().

HistoryItem

location: { path?, name?, params?, query?, hash? }

A location of this saved page.

data: object?

A backup data.

If you want to clear the backup data, you set undefined to this property.

scrollPositions: object

A saved scroll positions. A root window is obtained with 'window' key, the others by the selector.

License

MIT License

Copyright (c) Hidekatsu Izuno ([email protected])