CODEWITHSUNDEEP
vue.jsnuxt.js
ottz0
ottz0

Reputation: 2605

Global Components in Nuxt JS

I have built some components such as modals and reviews that I want to use and reuse just about everywhere in my site.

I have made a single global.js file in the plugins folder, So iv'e just registered this in my nuxt.config.js file once.

In my global.js file i've imported vue and called the components

import Vue from 'vue';
Vue.component('component-modal', () => import('@/components/modal'));
Vue.component('component-modal-other', () => import('@/components/modalOther'));
Vue.component('component-reviews', () => import('@/components/reviews'));

The reason for this is that now I don't have to do component import on every instance that I want to use it for I just call the component <my-component>.

However I've just switched to Universal mode and i'm now getting hydration warnings that are all coming from my global.js components file that I made in my plugins folder.

Should I not have a global.js file and each component that I want to use globally have it's own file in the plugins folder? Or do I just need to import the component when I need it locally in the file that is requiring it?

What is the best way to re-use and register global mini components that I have created?

Vue 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

The only way I can avoid this warning is not to put my components into a global.js component file and register it with Nuxt plugins. Only use the component import into each instance which kind of defeats the purpose of global components

Upvotes: 0

Views: 3370

Answers (1)

Jazuly
Jazuly

Reputation: 1424

try this

import Modal from '@/components/modal'
Vue.component('Modal', Modal)

in your view

</modal>

Upvotes: 1

Related Questions