Update document for Nuxt

[darr1s]

Thanks for the awesome plugin! Just want to let you know I'm unable to use <headroom> component, instead I need to use <vue-headroom> for the plugin to work.

import Vue from 'vue'
import vueHeadroom from 'vue-headroom'

Vue.use(vueHeadroom)

[dalphyx]

Maybe it's better to use vue-headroom for both plugin and import.

[darr1s]

Yes, that is what I suggesting. The official document and github.io home page example does not work for me. It says error component name not registered

[johnyluyte]

Here's how to make it work in Nuxt.js.

First, npm install vue-headroom

in nuxt.config.js:
(This plugin is SSR ready according to #12 )

plugins: [
    {
        src: "~/plugins/headroom.js",
        ssr: true
    }
],

in ~/plugins/headroom.js:

import Vue from "vue";
import vueHeadroom from "vue-headroom";
Vue.use(vueHeadroom);

in your page:

<template>
  <section>
    <headroom><header>header</header></headroom>
    <div>content</div>
  </section>
</template>

<script>
import { headroom } from "vue-headroom";

export default {
  components: {
    headroom
  },
};
</script>

[imShara]

@johnyluyte is it right example for nuxt?

In your example component added locally . Look how it made here. Global config (Vue.use(vueHeadroom, CONFIG)) not working.

[matiyin]

I got it to work simply by using a plugin:

/plugins/vue-headroom.client.js
import Vue from 'vue'
import vueHeadroom from 'vue-headroom'
Vue.use(vueHeadroom)

nuxt.config.js
plugins: [
'~/plugins/vue-headroom.client.js' // hide on scroll menu system
]

And then I can just use <vue-headroom> as a component in my page templates without importing or declaring the component locally.