Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.

Usage no npm install needed!

<script type="module">
  import 160over90VueFloatingListView from 'https://cdn.skypack.dev/@160over90/vue-floating-list-view';


List View


Creates a list of sections with a nav that provides a link to each section. The current section's li is given the class active in the nav.

If you do not have yarn you can download it here.

Instructions for global registration

yarn add @160over90/vue-floating-list-view

Include in main.js (app entry point)

import ListView from '@160over90/vue-floating-list-view';


Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve


A simple example of the ListView component. The ListViewSection components are placed inside of a ListView component. The content inside of the ListViewSection components can be anything and does not have to be text.

  <ListViewSection label="Section1">Section 1</ListViewSection>
  <ListViewSection label="Section2">Section 2</ListViewSection>
  <ListViewSection label="Section3">Section 3</ListViewSection>



rootMargin (Number, Default: 0) The root margin for intersection observer to determine when to recalculate the active element. If the nav is fixed, this is usually the height of the nav.

ordered (Boolean, Default: false) Determines whether the list in the nav should be an ordered or unordered list.

smoothScroll (Boolean, Default: false) Smooth scrolls to section when nav item is clicked. Polyfill needed if browser doesn't have native support.


label (String, Required) The section label used in the navigation. The label is also slugified to create an id for the section.


Polyfills are needed for intersection observer and smooth scrolling on browsers without native support. Recommended polyfill packages below.