router-view v-slot={ Component }

hi all

I'm working on an SSR project with Vue 3 and since nuxt already has Vue 3 I was trying to do a copy of the project using nuxt.
The project uses a server driven ui approach, so basically everything comes from the server (we don't have defined pages, the content of each page is defined on the backend where the editor chooses the components and the content for each one of them)
So, on app.vue we have something like this:

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

When I try to run the app I get an error on 'Component'
I already updated the template to this but i still get the same error:

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

So my question is, what's the correct way to replace the '<router-view v-slot="{ Component }">'?

Thanks

Nuxt•4y ago•

3 replies

Victor Neves

router-view v-slot={ Component }

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

<template>
    <component :is="layout">
        <router-view v-slot="{ Component }">
            <Suspense>
                <main class="base-main">
                    <component :is="Component" />
                </main>
            </Suspense>
        </router-view>
    </component>
</template>

When I try to run the app I get an error on 'Component'
I already updated the template to this but i still get the same error:

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

<template>
    <NuxtLayout :is="layout">
      <Nuxt v-slot="{ Component }">
          <Suspense>
            <main class="base-main">
              <component :is="Component" />
            </main>
        </Suspense>
      </Nuxt> 
    </NuxtLayout>
</template>

So my question is, what's the correct way to replace the '<router-view v-slot="{ Component }">'?

Thanks

router-view v-slot={ Component }

Similar Threads

router-view v-slot={ Component }

Similar Threads

Similar Threads

Similar Threads