VuePageLinks

(Alpha) A Vue.js plugin of component for displaying all links in a page.

Installation

 npm install --save vue-page-links

Usage

Bundler (Webpack, Rollup)

 import Vue from 'vue'
import VuePageLinks from 'vue-page-links'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-page-links/dist/vue-page-links.css'

Vue.use(VuePageLinks)

Browser

 <!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-page-links/dist/vue-page-links.css"></link>
<script src="vue-page-links/dist/vue-page-links.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-page-links/dist/vue-page-links.css"></link>
<script src="https://unpkg.com/vue-page-links"></script>

Component

<template>  
  <VuePageLinks :showHeader="false"/>
</template>

<script>
import { VuePageLinks } from 'vue-page-links';
export default {
  components: { VuePageLinks },
};
</script>

Component props

• header: A header line for the link list
  • default: ''
• headerColor: A css property for header color
  • default: 'black'
• headerClass: A css class that is appliead to header
  • default: ''
• itemClass: A css class that is appliead to link items
  • default: ''
• itemColor: A css property for link items color
  • default: 'blue'
• showHeader: Toggles header visibility
  • default: false
• listStyle: A css property for <li /> list style
  • default: 'disc'
• textDecoration: A css property for <a /> text decoration
  • default: 'underline'