[Vue warn]: Hydration node mismatch:

Environment

---

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 3.0.0-27243104.5e903ae
• Package Manager: Yarn
• Bundler: Vite
• User Config: meta, buildModules
• Runtime Modules: -
• Build Modules: nuxt-windicss@2.0.2

---

Describe the bug

A warning occurs in console when i add a @click attribute in html tag

[Vue warn]: Hydration node mismatch:
- Client vnode: i 
- Server rendered DOM: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
  <line x1="3" y1="12" x2="21" y2="12"></line>
  <line x1="3" y1="6" x2="21" y2="6"></line>
  <line x1="3" y1="18" x2="21" y2="18"></line>
</svg>  
  at <Navbar> 
  at <AsyncComponentWrapper> 
  at <Default name="default" > 
  at <AsyncComponentWrapper name="default" > 
  at <NuxtLayout key=0 name=undefined > 
  at <RouterView> 
  at <NuxtPage> 
  at <App> 
  at <Root>

Reproduction

.

Additional context

<template>
  ... 
  <a @click="menu"><i data-feather="menu"></i></a>
</template>

<script setup>
  const menu = () => {
    console.log('menu')
  }
</script>

Logs

No response

[henningko]

Trying to wrap my head around this…:

[Vue warn]: Hydration node mismatch:
- Client vnode: div 
- Server rendered DOM: 
<form class="row flex flex-center"> <empty string> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <App> 
  at <NuxtRoot>

Which probably stems from a problem with my if/else, as the form referenced up top is the form shown if isAuthenticated() fails:

<template>
  <div class="w-full min-h-screen bg-white dark:bg-black dark:text-white p-8">
    <div v-if="isAuthenticated()">
      <Logout />
      <h1 class="text-7xl font-bold mb-8">Brief.</h1>
      <Content />
    </div>
    <Auth v-else />
  </div>
</template>
<script setup lang="ts">
const { $supabase } = useNuxtApp();
const loading = ref(false);
const { isAuthenticated } = await useAuth();
</script>

useAuth.ts

import type { Session } from "@supabase/supabase-js";

// const authenticated = ref<boolean>(false);

// session is null when not logged in
const userSession = ref<Session | null>(null);
const userCookieSet = ref<boolean | null>(null);

export default async () => {
  const isAuthenticated = () => {
    return userSession.value?.user && userCookieSet.value;
  };

  return {
    userSession,
    userCookieSet,
    isAuthenticated,
  };
};

whereby userSession is set by supabase.auth, and a subsequent request to /api/auth ensures that a cookie is being set so that Nuxt’s API can make requests to supabase on behalf of the user. Full repo: https://github.com/henningko/briefxyz/tree/api New to Nuxt3/SSR/Supabase and biting off more than I can chew, probably, so please don’t hold back with criticism 😃

Environment

• Operating System: macOS
• Node Version: v17.4.0
• Nuxt Version: 3.0.0-27398533.8edd481
• Package Manager: Yarn
• Bundler: Vite
• User Config: buildModules, RuntimeConfig
• Runtime Modules: -
• Build Modules: nuxt-windicss@2.2.2

[alexanderkraus]

If you want to use the whole feather-icons package, I think it’s easiest to implement a component which renders the icon to SVG, like so:

<script>
import feather from "feather-icons";

export default {
  props: {
    icon: String,
    validator: function (value) {
      return typeof feather.icons[value] !== "undefined";
    },
  },
  render(h) {
    let svg = "";
    if (typeof feather.icons[this.icon] !== "undefined") {
      svg = feather.icons[this.icon].toSvg();
    }
    return h("i", {
      class: {
        icon: true,
      },
      domProps: {
        innerHTML: svg,
      },
    });
  },
};
</script>

<style scoped>
i {
  display: inline-block;
}
</style>

which could be used as follows

<template>
  <div id="app">
    <Feather-Icon icon="x" />
    <Feather-Icon icon="y" />
    <Feather-Icon icon="award" />
    <Feather-Icon icon="briefcase" />
  </div>
</template>

<script>
import FeatherIcon from "./components/FeatherIcon";

export default {
  name: "App",
  components: {
    FeatherIcon,
  },
};
</script>

<style>
.icon {
  color: #364fc7;
}
</style>

see https://codesandbox.io/s/happy-kare-hoy65?file=/src/components/FeatherIcon.vue:0-536

There are also other packages like vue-feather, but IMHO those packages often provide features which are not always required in every project…