nuxtjs-sticky-sidebar v1.2.0

Nuxt.js component implementing the sticky-sidebar-v2 library.

Installation

Using npm:

$ npm install --save nuxtjs-sticky-sidebar

Using yarn:

$ yarn add nuxtjs-sticky-sidebar

Usage

as single component

<template>
  <div id="app">
    <header>
      <div class="container">
        <h1>Site Title</h1>
      </div>
    </header>

    <div class="container clearfix">
      <nuxtjs-sticky-sidebar class="sidebar" containerSelector=".container" innerWrapperSelector='.sidebar__inner'>
            <p>This is sticky column</p>
      </nuxtjs-sticky-sidebar>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.</p> dolor.</p>
      </div>
    </div>

    <footer>
      <p>Very Tall Footer</p>
    </footer>
  </div>
</template>



<script>
import nuxtjsStickySidebar from "nuxtjs-sticky-sidebar";

export default {
  name: "ServeDev",
  components: {
    "nuxtjs-sticky-sidebar": nuxtjsStickySidebar
  }
};
</script>

or in nuxtjs you can use it as global component

in your plugins folder add this file:

1. plugins/nuxtjs-sticky-sidebar.client.js

import Vue from "vue";
import NuxtjsStickySidebar from "~/node_modules/nuxtjs-sticky-sidebar/dist/nuxtjs-sticky-sidebar.esm";

Vue.use(NuxtjsStickySidebar);

2. plugins/nuxtjs-sticky-sidebar.server.js

import Vue from "vue";
import NuxtjsStickySidebar from "~/node_modules/nuxtjs-sticky-sidebar/dist/nuxtjs-sticky-sidebar.ssr";

Vue.use(NuxtjsStickySidebar);

and then in your nuxt.config.js add the plugins that we created before:

export default {
	// ...

	// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
	plugins: [
		"~/plugins/nuxtjs-sticky-sidebar.client.js", // only in client side
		"~/plugins/nuxtjs-sticky-sidebar.server.js", // only in server side
	],

	// ...
};

and this is how you use the global component:

<template>
	<NuxtjsStickySidebar
		class="sidebar"
		:topSpacing="60"
		:bottomSpacing="30"
		containerSelector=".main-content"
	>
		<!-- your content -->
	</NuxtjsStickySidebar>
</template>

Props

Find more reference at official sticky-sidebar-v2.

Todo

• Add Events