1. vue-router-preview

vue-router-preview

vue-router-preview

NPM
NPM DOWNLOADS
MINIZIP SIZE

Features

  • Preview link content when hovering over the link.
  • You don't need to change your code base to make it work.
  • Mini-size. Only ~1KB in gzip.

Install

 yarn add vue-router-preview

Usage

You need to use this plugin after vue-router:

 import Vue from 'vue'
import Router from 'vue-router'
import RouterPreview from 'vue-router-preview'
import 'vue-router-preview/dist/index.css'

Vue.use(Router)
Vue.use(RouterPreview)

Then you can use <router-link> without any changes.

You can also register it as a new component instead of overriding <router-link>:

 Vue.use(RouterPreview, {
  componentName: 'PreviewLink'
})

Now you can use it as <preview-link> in your app.

Browser Support

  • Evergreen browser.

Options

 Vue.use(RouterPreview, options: object)

preview

  • Type: boolean
  • Default: true

Whether to preview the hovering route component.

delay

  • Type: number string
  • Default: 0
  • Unit: ms

Delay to fetch and show preview.

scale

  • Type: string
  • Default: 0.25

Default transform scale.

safetyOffset

  • Type: number
  • Default: 20

Safety offset to show the preview on the left side. However, it's recommended not to be lower than DEFAULT.

keep

  • Type: boolean
  • Default: true

style

Override the preview style.

 /* Overview */
.PreviewWrapper {
  width: 100vw;
  height: 100vh;
  ...;
}

Props

All props are still available, additional props are same with Options but standalone, differences props are listed below.

style

  • Type: string

It should be origin HTML style attribute.

Author

vue-router-preview © EVILLT, release under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

Homepage • GitHub @evillt