Nuxt•2y ago

NuxtLink issue?

Hi All I have a strange issue in my project. I have started some days ago with the project. Well, in the beginning, i thought all works fine but after some clicking around it seems that the NuxtLinks does not really work reliable. i have attached a video which shows the behaviour better. it looks like i stress the page too much but this happens regularly. if changing the links slower, it happens too. if i should upload my code its not a problem. here are some extracts: packages/store/layouts/default.vue

<template>
  <v-app id="inspire">
    <v-app-bar class="px-3" color="white" flat density="compact">
      <v-avatar color="grey-darken-1" size="32"> <MainSetTheme /> </v-avatar>

      <v-spacer></v-spacer>

      <v-tabs centered color="grey-darken-2">
        <MainTopBar />
      </v-tabs>
      <v-spacer></v-spacer>

      <v-avatar color="grey-darken-1" size="32">
        <FormLogin
          :fromActionName="'Login'"
          :formIcon="'fa:fas fa-right-to-bracket'"
        />
      </v-avatar>
    </v-app-bar>
    <v-main class="bg-grey-lighten-3">
      <v-container>
        <v-row>
          <MainLeftMenu />
          <v-col cols="12" sm="10">
            <v-sheet min-height="70vh" rounded="lg" class="pa-3">
              <slot />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import {useTheme} from 'vuetify'
</script>

<template>
  <v-app id="inspire">
    <v-app-bar class="px-3" color="white" flat density="compact">
      <v-avatar color="grey-darken-1" size="32"> <MainSetTheme /> </v-avatar>

      <v-spacer></v-spacer>

      <v-tabs centered color="grey-darken-2">
        <MainTopBar />
      </v-tabs>
      <v-spacer></v-spacer>

      <v-avatar color="grey-darken-1" size="32">
        <FormLogin
          :fromActionName="'Login'"
          :formIcon="'fa:fas fa-right-to-bracket'"
        />
      </v-avatar>
    </v-app-bar>
    <v-main class="bg-grey-lighten-3">
      <v-container>
        <v-row>
          <MainLeftMenu />
          <v-col cols="12" sm="10">
            <v-sheet min-height="70vh" rounded="lg" class="pa-3">
              <slot />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import {useTheme} from 'vuetify'
</script>

packages/store/components/Main/TopBar.vue

<template>
  <div>
    <v-tab>
      <NuxtLink :to="'/'"> Shop </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/article/list'"> Artikel </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/sale/list'"> Verkauf </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/user/list'"> Benutzer </NuxtLink>
    </v-tab>
  </div>
</template>

<script setup lang="ts"></script>

<template>
  <div>
    <v-tab>
      <NuxtLink :to="'/'"> Shop </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/article/list'"> Artikel </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/sale/list'"> Verkauf </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/user/list'"> Benutzer </NuxtLink>
    </v-tab>
  </div>
</template>

<script setup lang="ts"></script>

packages/store/app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

NuxtLink issue?