Open darr1s opened 6 years ago
Maybe it's better to use vue-headroom
for both plugin and import.
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
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>
@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.
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.
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.