Nuxt component registration?

[IHIutch]

I can't seem to get this to work with nuxt. I keep getting the warning: Unknown custom element: <unicon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My plugin/vue-unicons.js looks like this

import Vue from "vue";
import Unicon from "vue-unicons";
import { uniCarWash } from "vue-unicons/src/icons";

Unicon.add([uniCarWash]);
Vue.use(Unicon);

My nuxt config looks like this:

plugins: [{ src: "~/plugins/vue-unicons.js", mode: "client" }],

Maybe this is a SSR issue?

[IHIutch]

Also seems like if you are using SSR, you need to wrap your unicon component with client-only like so:

<client-only>
     <unicon name="car-wash" fill="limegreen"></unicon>
</client-only>

Otherwise, you get this warning:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[antonreshetov]

Yeah, I forgot to include the use of <client-only> in the documentation.
https://codesandbox.io/s/sad-wing-p2uvq?file=/pages/index.vue

[IHIutch]

That part I've figured out, but I still am getting the error Unknown custom element: <unicon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My configuration is here:

• Plugin
• Config
• Page

[IHIutch]

After some further inspection it looks like it might be a caching issue. Removing node_modules, .nuxt, and rebuilding package-lock.json seem to have it working

[IHIutch]

Not sure if this is something to look into, but I'm going to close this issue as I'm able to get it working now.