Nuxt•2y ago

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

2 Replies

Unknown User•2y ago

Message Not Public

Victor Neves•2y ago

Also tried with NuxtPage and didn't work. And from what I saw on the docs, NuxtPage it's when you have files inside the pages folder Looks like the problem was with the data received. At least for this way it's working

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

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

Gaming

Programming

router-view v-slot={ Component }