Rifat
Rifat
PostsComments
NNuxt
Created by Rifat on 6/26/2024 in #❓・help
useFetch status is success for a split second before changing to pending
<template>
    <main>
        <p>Index page</p>
        <NuxtLink href="/about">Go About</NuxtLink>
        <!-- <p>{{ data }}</p> -->
    </main>
</template>

<script setup lang="ts">
    const { data, status, error } = await useLazyFetch('/api', {
        method: 'GET',
        responseType: 'text'
    })

    watchEffect(() => {
        console.log(status.value)
    })
</script>
<template>
    <main>
        <p>Index page</p>
        <NuxtLink href="/about">Go About</NuxtLink>
        <!-- <p>{{ data }}</p> -->
    </main>
</template>

<script setup lang="ts">
    const { data, status, error } = await useLazyFetch('/api', {
        method: 'GET',
        responseType: 'text'
    })

    watchEffect(() => {
        console.log(status.value)
    })
</script>
I have the above code in my index.vue page. I also have another about.vue page. When index page renders in the browser for the first time (client-side navigation) the status is: idle => pending => success which is okay. But when it renders for the second time the status is: success => pending => success Why the status is success at first? Shouldn't it be pending from the start? How to fix it? If I want to show a loading placeholder in that page, it will render contents at first then after a split second it will show placeholder which is a problem.
3 replies
NNuxt
Created by Rifat on 4/25/2024 in #❓・help
Set Cache-Control header.
How to set cache-control header to the contents of public directory?
2 replies
NNuxt
Created by Rifat on 6/4/2023 in #❓・help
Why nitro doesn't wait for async plugins to complete operation?
I have a plugin that connects to mongodb. But connecting to mongodb takes some times. But nitro doesn't wait for that plugin to execute completely and then start the server. Instead it starts immediately (before connecting to mongodb) and starts responding. As a result error occurs. Plugin code=> 
export default defineNitroPlugin(async ev => {
    await mongo.init() // connects to mongodb
})
export default defineNitroPlugin(async ev => {
    await mongo.init() // connects to mongodb
})
4 replies
NNuxt
Created by Rifat on 4/26/2023 in #❓・help
Nuxt 3 API response error
Why do I get this if I send bulk request to the server? 
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="2">
    <title>Reloading server...</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico/css/pico.min.css">
  </head>
  <body>
    <main class="container">
      <article>
        <header>
          <h2>Reloading server...</h2>
        </header>
        <progress></progress><script>document.querySelector('progress').indeterminate=true</script>
        <footer>
          Check console logs for more information.
        </footer>
      </article>
  </main>
  </body>
</html>
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="2">
    <title>Reloading server...</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico/css/pico.min.css">
  </head>
  <body>
    <main class="container">
      <article>
        <header>
          <h2>Reloading server...</h2>
        </header>
        <progress></progress><script>document.querySelector('progress').indeterminate=true</script>
        <footer>
          Check console logs for more information.
        </footer>
      </article>
  </main>
  </body>
</html>
I've tested with 2000 requests and only 1322 request passed
8 replies
NNuxt
Created by Rifat on 3/24/2023 in #❓・help
Nuxt doesn't update document when data is changed on created
I've this code: 
<template>
    <Header @menuClicked="() => (showSideBar = !showSideBar)" />
    <main :showSideBar="showSideBar">
        <NuxtPage />
    </main>
    <Footer />
</template>

<script>
    export default defineNuxtComponent({
        data() {
            return { showSideBar: true }
        },
        created() {
            if (!process.client) return
            if (globalThis.window.innerWidth <= 800) {
                this.showSideBar = false
            }
        }
    })
</script>
<template>
    <Header @menuClicked="() => (showSideBar = !showSideBar)" />
    <main :showSideBar="showSideBar">
        <NuxtPage />
    </main>
    <Footer />
</template>

<script>
    export default defineNuxtComponent({
        data() {
            return { showSideBar: true }
        },
        created() {
            if (!process.client) return
            if (globalThis.window.innerWidth <= 800) {
                this.showSideBar = false
            }
        }
    })
</script>
So, by default showSideBar is true. But if the window width is <= 800, then the showSideBar becomes false. Now that the value of showSideBar is false the value of showSideBar attribute in main element should change to false. But it doesn't change
43 replies
NNuxt
Created by Rifat on 3/18/2023 in #❓・help
Doesn't show error page if called from inside an async function.
methods:{
            async getPosts(time = 0) {
                let got = await fetch('/getPosts', { method: 'POST', body: JSON.stringify({ section: '*', modifiedAfter: time }) })
                    .then(r => r.json())
                    .catch(fetchError)

                if (got.success) {
                    this.posts.push(...got.docs)
                    if (got.docs.length < got.limit) this.reachedEnd = true
                    this.sections = got.sections
                    // return
                }

                throw createError({ fatal: true })
            }
}
methods:{
            async getPosts(time = 0) {
                let got = await fetch('/getPosts', { method: 'POST', body: JSON.stringify({ section: '*', modifiedAfter: time }) })
                    .then(r => r.json())
                    .catch(fetchError)

                if (got.success) {
                    this.posts.push(...got.docs)
                    if (got.docs.length < got.limit) this.reachedEnd = true
                    this.sections = got.sections
                    // return
                }

                throw createError({ fatal: true })
            }
}
13 replies