NuxtN
Nuxt•3y ago
Victor Neves

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>

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>

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

Thanks
Was this page helpful?