lkjimy Posts - Answer Overflow

lkjimy

Posts Comments

NNuxt

•Created by lkjimy on 10/18/2024 in #❓・help

H3 doesn't support body content on SEARCH method?

1 replies

NNuxt

•Created by lkjimy on 3/7/2024 in #❓・help

How to prevent hydration issues when using the route query to change UI elements and fetch data?

So, let's say a /search page reads the current query in the URL, and uses it to change UI elements, for example, a search field or a filter component, then it uses this query to fetch the proper data and show the results. How do we prevent Hydration issues in this case? Do we have to isolate elements with <client-only>? Or just make the whole route SSR: false? Does generally, very dynamic pages always go for SSR: false? Every time I change the UI based on content from the client (like, localStorage), I ran into this kind of issue. I would like a bit more nuance on this, because it seems like the fix is always too harsh. (If possible, share videos talking about it, or more details. Thanks!)

10 replies

NNuxt

•Created by lkjimy on 3/7/2024 in #❓・help

When setting a specific route to `ssr: false`, the page is rendered last in the html

Let's say we have the following layout:

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <slot />
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <slot />
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

And a /search page.

<template>
  <div class="page-search">...</div>
</template>

<template>
  <div class="page-search">...</div>
</template>

When we navigate from other pages, the /search page is rendered properly:

//...
<body>
  <div id="__nuxt" data-v-app="">
    <div class="layout-wrapper">
      <div class="header"></div>
      <div class="page-search"></div> // The position where slot is
      <div class="footer"></div>
      <div class="some-other-component"></div>
    </div>
  </div>
  // ...
</body>

//...
<body>
  <div id="__nuxt" data-v-app="">
    <div class="layout-wrapper">
      <div class="header"></div>
      <div class="page-search"></div> // The position where slot is
      <div class="footer"></div>
      <div class="some-other-component"></div>
    </div>
  </div>
  // ...
</body>

But, if we access the page directly, as if we pressed enter on the /search URL in the browser:

//...
<body>
  <div id="__nuxt" data-v-app>
    <div class="layout-wrapper">
      <div class="header"></div>
      // The position where the page should be
      <div class="footer"></div>
      <div class="some-other-component"></div>
      <div class="page-search"></div> // The position it is being rendered
    </div>
  </div>
  // ...
</body>

//...
<body>
  <div id="__nuxt" data-v-app>
    <div class="layout-wrapper">
      <div class="header"></div>
      // The position where the page should be
      <div class="footer"></div>
      <div class="some-other-component"></div>
      <div class="page-search"></div> // The position it is being rendered
    </div>
  </div>
  // ...
</body>

Then, if we navigate from this to another page (which is SSR), that page is also rendered in the wrong position.

2 replies

NNuxt

•Created by lkjimy on 2/22/2024 in #❓・help

i18n inside plugin

How to access the I18n instance inside a plugin? I have a plugin that fetches global data for my app from a backend, and I need to use the locale. I cant import it from the composable... error caught during app initialization SyntaxError: Must be called at the top of a setup function ... Even though the plugin is inside a setup function...

export default defineNuxtPlugin({
  name: 'fetch-global-information',
  enforce: 'pre',
  async setup() {
    const { locale } = useI18n()
    // ...
  }
})

export default defineNuxtPlugin({
  name: 'fetch-global-information',
  enforce: 'pre',
  async setup() {
    const { locale } = useI18n()
    // ...
  }
})

I can't use use it from nuxtApp, because I18n is not there yet...

export default defineNuxtPlugin({
  name: 'fetch-global-information',
  enforce: 'pre',
  async setup(nuxtApp) {
    const { locale } = nuxtApp.$i18n
    // ...
  }
})

export default defineNuxtPlugin({
  name: 'fetch-global-information',
  enforce: 'pre',
  async setup(nuxtApp) {
    const { locale } = nuxtApp.$i18n
    // ...
  }
})

(This solution is inconsistent in development, but fails 100% in production.) How do I make sure i18n is loaded before my plugin?

7 replies

Gaming

Programming