Rush Posts - Answer Overflow

Rush

Explore posts from servers

•Created by Rush on 11/16/2024 in #❓・help

Usefetch doesnt work when using middleware

Hi, I have a problem. If I use middleware (even if it is empty), my usefetch does not work during ssr. It does get the data, but it doesn't pass it to the client.

5 replies

NNuxt

•Created by Rush on 11/13/2024 in #❓・help

Pinia problem

Hi, I have a problem with the pinia in my nuxt project. I installed it according to the instructions in the documentation: https://pinia.vuejs.org/ssr/nuxt.html Specifically, I just ran this command: npx nuxi@latest module add pinia But I get an error when I want to use it. What can I do about it please? [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

// stores/errorStore.ts
import { defineStore } from 'pinia';

export const useErrorStore = defineStore('errorStore', {
  state: () => ({
    errorMessage: '' as string | null,
  }),
  actions: {
    setError(message: string) {
      this.errorMessage = message;
    },
    clearError() {
      this.errorMessage = null;
    },
  },
});

components/error.vue:

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

<template>
  <div v-if="errorMessage">
    {{ errorMessage }}
    <button type="button" @click="clearError">
      Clear error
    </button>
  </div>
</template>

<script lang="ts" setup>
const errorStore = useErrorStore();

const errorMessage = computed(() => errorStore.errorMessage);
const clearError = () => errorStore.clearError();
</script>

12 replies

NNuxt

•Created by Rush on 10/19/2024 in #❓・help

usecookie() problem

Hi, I have a problem with usecookie. I am trying to keep the darkmode value even after closing the page. The problem is that in "npm run dev" environment it works, but after generating it with "npx nuxi generate" and uploading it to a static webhost it doesn't. I believe the problem may be in the bind of the 'dark' class to the darkMode value. If I remove this and only display the darkmode value using {{ darkMode }} it works on static hosting. Please help.

<template>
  <div class="min-h-screen bg-white text-black dark:bg-black dark:text-white" :class="{'dark' : darkTheme}">
    <p>Dark theme: {{ darkTheme }}</p>
    <button type="button" @click="toggleTheme">Toggle theme</button>
  </div>
</template>

<script setup lang="ts">
const darkTheme = useCookie(
  'darkTheme',
  {
    default: () => true,
    watch: true
});

const toggleTheme = () => {
  darkTheme.value = !darkTheme.value;
};
</script>

<template>
  <div class="min-h-screen bg-white text-black dark:bg-black dark:text-white" :class="{'dark' : darkTheme}">
    <p>Dark theme: {{ darkTheme }}</p>
    <button type="button" @click="toggleTheme">Toggle theme</button>
  </div>
</template>

<script setup lang="ts">
const darkTheme = useCookie(
  'darkTheme',
  {
    default: () => true,
    watch: true
});

const toggleTheme = () => {
  darkTheme.value = !darkTheme.value;
};
</script>

1 replies

NNuxt

•Created by Rush on 7/25/2024 in #❓・help

Nuxt socket.io CORS error

Hi, if I have a nuxt application behind a reverse proxy (nginx), should I set up CORS only in nginx or also in nuxt?

31 replies

NNuxt

•Created by Rush on 7/10/2024 in #❓・help

Pinia store socket.io error

Hi, I want to store my socket.io connection in pinia store. This is my code:

import { io } from 'socket.io-client';

export const useWebsocketStore = defineStore('websocketStore', {
  state: () => ({
    isConnected: false,
    socket: null,
  }),
  actions: {
    init() {
      this.socket = io();
      this.bindEvents();
    },
    bindEvents() {
      if (this.socket) {
        this.socket.on("connect", () => {
          this.isConnected = true;
        });

        this.socket.on("disconnect", () => {
          this.isConnected = false;
        });

        this.socket.on("error", (error) => {
          console.log(error);
        });
      }
    },
  },
});

import { io } from 'socket.io-client';

export const useWebsocketStore = defineStore('websocketStore', {
  state: () => ({
    isConnected: false,
    socket: null,
  }),
  actions: {
    init() {
      this.socket = io();
      this.bindEvents();
    },
    bindEvents() {
      if (this.socket) {
        this.socket.on("connect", () => {
          this.isConnected = true;
        });

        this.socket.on("disconnect", () => {
          this.isConnected = false;
        });

        this.socket.on("error", (error) => {
          console.log(error);
        });
      }
    },
  },
});

but I am getting this error: Cannot stringify arbitrary non-POJOs what to do please?

11 replies

NNuxt

•Created by Rush on 1/13/2024 in #❓・help

Flowbite not working when using nuxtlink

Hi, I am using tailwind with flowbite in my nuxt project. I installed flowbite using the instructions on their site, if I use the traditional way of loading the page everything works as it should. But when I switch the page using nuxtlink, the flowbite components that are new on the page don't work. Please help. My app.vue:

<template>
    <AppHeader />
    <main>
        <NuxtPage />
    </main>
    <AppFooter />
</template>

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

onMounted(() => {
    initFlowbite();
})
</script>

<template>
    <AppHeader />
    <main>
        <NuxtPage />
    </main>
    <AppFooter />
</template>

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

onMounted(() => {
    initFlowbite();
})
</script>

37 replies

Gaming

Programming