dataexcess Comments - Answer Overflow

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

do you mean the hydration field in the defineAsyncComponent API ? it seems it's not exposed in nuxt

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

<template>
    <div class="relative h-[100svh] w-full bg-white">
        <main class="absolute inset-0 h-full w-fulloverflow-y-auto px-6">
            <component
                v-for="(page, idx) in pages"
                :is="page.component"
                :key="idx"
            />
        </main>
    </div>
</template>

<script setup>
const pages = [
    { path: '/', component: defineAsyncComponent(() => import('@/pages/landing.vue')) },
    { path: '/volume1', component: defineAsyncComponent(() => import('@/pages/volume1.vue')) },
    { path: '/books', component: defineAsyncComponent(() => import('@/pages/books.vue')) },
    { path: '/about', component: defineAsyncComponent(() => import('@/pages/about.vue')) }
]
</script>

<template>
    <div class="relative h-[100svh] w-full bg-white">
        <main class="absolute inset-0 h-full w-fulloverflow-y-auto px-6">
            <component
                v-for="(page, idx) in pages"
                :is="page.component"
                :key="idx"
            />
        </main>
    </div>
</template>

<script setup>
const pages = [
    { path: '/', component: defineAsyncComponent(() => import('@/pages/landing.vue')) },
    { path: '/volume1', component: defineAsyncComponent(() => import('@/pages/volume1.vue')) },
    { path: '/books', component: defineAsyncComponent(() => import('@/pages/books.vue')) },
    { path: '/about', component: defineAsyncComponent(() => import('@/pages/about.vue')) }
]
</script>

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

@manniL Not sure if I understand... but I'll paste some code here. The main issue I want to solve is this: I have a one-page vertical scroll website with different sections. Since I am so used to working with Nuxt /pages directory I thought it'd be a good idea to keep using the pages directory and to transform the pages into components. But in doing so I am having a difficult time to make those components lazy... I guess I could solve it in using components instead of transformed pages for this and prefixing 'Lazy-' but I was wondering what you think about this 😄

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

@manniL could you take a look at my question? would appreciate it a lot. big fan of your channel 😀

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

I tried having a simple empty component called 'Page' with a slot.. I then would wrap my <component :is> components in a LazyPage... but that does not seem to work either

34 replies

NNuxt

•Created by Mubo on 3/20/2025 in #❓・help

Is it possible to use 'hydrate-never' with '<component :is="....' ?

sorry can someone explain to me what the solution is? I'm stuck with the same problem

34 replies

Gaming

Programming