Nuxt•9mo ago

[RESOLVED] Vue Warning Hydration

Why show this warning? what am I doing wrong? why do the client and server have two different results? I'm using components from models which is only used internally. My settings of the module is:

import {defineNuxtModule, createResolver, addComponentsDir} from "@nuxt/kit";
import type { Nuxt } from '@nuxt/schema'

export default defineNuxtModule({
    meta: {
        name: "form",
        configKey: "form",
        compatibility: {
            nuxt: "^3.0.0",
            bridge: false
        }
    },
    setup(resolvedOptions, nuxt: Nuxt) {
        const { resolve } = createResolver(import.meta.url);

        //add components
        addComponentsDir({
            path: resolve('./components'),
            pathPrefix: false,
            global: true
        });
    },
});

import {defineNuxtModule, createResolver, addComponentsDir} from "@nuxt/kit";
import type { Nuxt } from '@nuxt/schema'

export default defineNuxtModule({
    meta: {
        name: "form",
        configKey: "form",
        compatibility: {
            nuxt: "^3.0.0",
            bridge: false
        }
    },
    setup(resolvedOptions, nuxt: Nuxt) {
        const { resolve } = createResolver(import.meta.url);

        //add components
        addComponentsDir({
            path: resolve('./components'),
            pathPrefix: false,
            global: true
        });
    },
});

4 Replies

manniL•9mo ago

I doubt this is related Seems more like the UI library has hydration errors

CesxhinOP•9mo ago

What does hydration mean? I would like to understand this term well are you saying that it is most likely not a nuxt problem but a vuetify problem?

Cue•9mo ago

The docs has a good explanation https://vuejs.org/guide/scaling-up/ssr.html

Vue.js

Vue.js - The Progressive JavaScript Framework

CesxhinOP•9mo ago

thank you so much. I solved it! The problem was this:

 Use a random number generator library that supports generating with seeds, and guarantee the server run and the client run are using the same seed

 Use a random number generator library that supports generating with seeds, and guarantee the server run and the client run are using the same seed

Gaming

Programming

[RESOLVED] Vue Warning Hydration