Nuxt.js [Vue warn]: Unknown custom element: <affix>

[ghost]

Sadly can't get the plugin to work in Nuxt.js

Navigation.vue component

    <template>
      <affix class="top-nav" relative-element-selector="#content">
        <nav id="navigation" role="navigation" aria-label="main navigation">
          <a href="#test">Test</a>
        </nav>
      </affix>
    </template

nuxt.config.js

module.exports = {
  plugins: [
    { src: '~/plugins/vue-affix', srr: false }
  ]
}

vue-affix.js

import Vue from 'vue'
var Affix = require('vue-affix');

Vue.use(Affix);

[appinteractive]

You have a typo in ssr (ssr).
And you probably want to wrap the component with <no-ssr></no-ssr>

[ghost]

Just tried to install the plugin and had a similar problem without nuxt.
Then I changed 'var Affix = require('vue-affix');' to 'import':
import Affix from 'vue-affix';
It sounds silly but it solved my problem.

[eddiemf]

Have you had any success on getting this to work? I'm not sure if it's because of your typo or if it's really a bug.

Thanks for the feedback!

[appinteractive]

@eddiemf for me at least it worked like a charm. @lempert, @NetBzz I also used import instead of require. With require you sometimes may have to add .default to the end.

[ghost]

Yes, using import instead of require worked and I also had to use <no-ssr> tags.

[scoutrul]

Hello! I'm using this plugin with Nuxt too and had same problem.
You should add info about Nuxt installation to the doc.
This is my way:

1. add Affix plugin to nuxt config

 import Affix from 'vue-affix';
 Vue.use(Affix)

2. use tag 'affix'

[yvess]

with nuxt 2.12 I need to do this:

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/vue-affix', mode: 'client' }
  ],
...

plugins/vue-affix.js

import Vue from 'vue'
import Affix from 'vue-affix'

if (process.client) {
  Vue.use(Affix)
}

in template

...
      <client-only>
        <affix
          relative-element-selector="#content"
          style="width: 400px"
        >
        ...
       </affix>
     </client-only>
...

[appinteractive]

The <client-only/> part might be really bad depending on the content rendered inside as it will not get indexed by search machines properly. The package should account for this and just output the slot content when window is not available.

[yvess]

The <client-only/> part might be really bad depending on the content rendered inside as it will not get indexed by search machines properly. The package should account for this and just output the slot content when window is not available.

Yes it would be better if the package would properly support SSR

[CavalcanteLeo]

No plans to support SSR?