Nuxt 3, Nuxt Page, how should I apply transition if only one page (no navigation), when landing on site

Just finishing off my landing page, which will be online whilst I build my new portfolio. Thing, is I am thus not using router. I consulted the Nuxt AI, and it told me that the following would work in no router cases.

Updated title: it is of course using router even if no navigation, sorry. Page component is there...

App.vue

<template>
    <div>
        <NuxtLayout>
            <NuxtPage :transition="{
                name: 'page',
                mode: 'default'
            }" />
        </NuxtLayout>

        <NuxtLoadingIndicator color="#67d360" :throttle="0" />
    </div>
</template>

<style>
html,
body {
    background-color: black;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.page-enter-active,
.page-leave-active {
    transition: all 1.4s;
}

.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}
</style>

But, alas, it is not. I have single root element on my index.vue which loads into a layout, default.vue

Upvotes: 0

Views: 39

Answers (0)

Related Questions