vue-router-preview

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

• Type: object
• Default: preview.css

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