# nuxt-prefetch

> library prefetch links for nuxtjs

Latest version **1.0.6** (published 2021-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-prefetch
pnpm add nuxt-prefetch
yarn add nuxt-prefetch
bun add nuxt-prefetch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-10-04 |
| First published | 2021-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | humiyan02 |
| Maintainers | humiyan02 |
| Keywords | nuxt, vue, prefetch, nuxt-link, vue-router |

## Links

- npm: https://www.npmjs.com/package/nuxt-prefetch
- Repository: https://github.com/humiyan02/nuxt-prefetch
- Homepage: https://github.com/humiyan02/nuxt-prefetch#readme
- Issues: https://github.com/humiyan02/nuxt-prefetch/issues
- npm.io page: https://npm.io/package/nuxt-prefetch

## Dependencies (2)

- [nuxt](https://npm.io/package/nuxt.md) ^2.15.7
- [core-js](https://npm.io/package/core-js.md) ^3.15.1

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2021-10-04
- 0.0.1 — 2021-10-04
- 1.0.5 — 2021-10-04
- 1.0.4 — 2021-10-03
- 1.0.3 — 2021-10-03
- 1.0.2 — 2021-10-03
- 1.0.1 — 2021-10-03
- 1.0.0 — 2021-10-03

## README

# Motivation
Wanting to prefetch at any time without using `<NuxtLink/>`.

`<NuxtLink/>` prefetch links when viewing it and navigate fast.
Without `<NuxtLink/>`, `router.push()` don't prefetch links and slowly navigate pages.
Therefore it's necessary to prefetch anywhere and anytime before `router.push()`. 
# Getting Started 
## Install package
```
npm install nuxt-prefetch
```
## Quick Start
pages/index.vue
```
import { usePrefetchRouter } from "nuxt-prefetch"
export default defineComponent({
  setup() {
    const { prefetch } = usePrefetchRouter('/hoge')
    prefetch()
  },
})
```
See network tab in Devtools and you look at hoge.js loaded.

# Usage
UseCase1:prefetch link after few seconds
```
export default defineComponent({
  setup() {
    const { prefetch } = usePrefetchRouter('/hoge')
    setTimeout(() => {
      prefetch()
    }, 5000)
  },
})
```
UseCase2:prefetch before run async function and run then navigation
```
const {prefetchRouter} = usePrefetchRouter('/hoge')
const execAsyncFunc = () =>
  prefetchRouter(async () => {
    await fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json()) // then navigate to /hoge 
      .catch((e) => {
        console.log(e)
      })
  })

```
UseCase3: prefetch all paths
```
const {prefetchAll} = usePrefetchRouter('/hoge')
prefetchAll(['/hoge', '/fuga'])

```

UseCase4:prefetch by viewing element
```
<template>
  <div>
    ↓scroll
    <div style="height: 1000px; width: 100%"></div>
    <button ref="prefetchTarget" @click="runSomeThenRouterPush">
      prefetch by viewing
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import { usePrefetchRouter } from '~/modules/usePrefetchRouter'

export default defineComponent({
  setup() {
    const { prefetchTarget } = usePrefetchRouter('/hoge')
    return { prefetchTarget }
  },
})
</script>

```

Option1：use router.push
```
const {goToPage} = usePrefetchRouter('/hoge')
goToPage() // router.push('/test')
```

Option2：use VueRouter
```
const {router} = usePrefetchRouter('/hoge')
router.push('/hoge')
```

# Example
[NuxtPrefetchSampleRepository](https://github.com/humiyan02/nuxt-prefetch-sample)

---
_Source: https://npm.io/package/nuxt-prefetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._