CODEWITHSUNDEEP
vue.jsnuxt.jsvue-routernuxt3.js
bappla
bappla

Reputation: 65

Simple Nuxt 3 Page Transition not working

I'm discovering Nuxt 3 and and simply want to make an animation between pages. The idea is to use javascript hooks to make page transitions using js library such as gsap or animeJs.

So in my app.vue file, I simply put <NuxtPage/> into <Transition> element like this :

<NuxtLayout>
    <Transition>
        <NuxtPage/>
    </Transition>
</NuxtLayout>

My vue pages ('./pages/index.vue' and './pages/project/myproject.vue') look like this :

<template>
    <div>
        <h1>My Project</h1>
    </div>
</template>

<script setup>
function onEnter(el, done) {
    done()
}
function onLeave(el, done) {
    done()
}
</script>

I have followed both Nuxt 3 and Vue 3 documentations :

https://v3.nuxtjs.org/guide/directory-structure/pages#layouttransition-and-pagetransition

https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

I also read this thread on github, but I can't find answer : https://github.com/nuxt/framework/discussions/851

When i was using Nuxt 2 I only need to put transition object into my page like this and it's working fine :

<script>
export default {
    // ... (datas, methods)
    transition: {
        mode: "in-out",
        css: false,
        enter(el, done) {
            console.log("enter");
            done()
        },
        leave(el, done) {
            console.log("leave");
            done()
        }
    }
}
</script>
<template>
    <div>
        <h1 class="text-center text-5xl">Hello World</h1>
    </div>
</template>

Do you have any idea how to achieve it ?

Upvotes: 3

Views: 10092

Answers (5)

Mr.Giao
Mr.Giao

Reputation: 1

How to use components?

<!--components/im/index.vue-->
<template>
    <ClientOnly>
        <Transition name="fade">
            <div>test</div>
        </Transition>
    </ClientOnly>
</template>
<script setup>

</script>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>

Upvotes: -1

Mohammadreza Khalilikhorram
Mohammadreza Khalilikhorram

Reputation: 470

nuxt 3 does not support transition tag in for layouts/pages. According to the Nuxt.js document, for page transitions, you must first add the below code to nuxt.config.ts to apply an automatic transition for all pages:

export default defineNuxtConfig({
   app: {
       pageTransition: { name: 'page', mode: 'out-in' }
   },
})

then, To start adding transitions between your pages, add the following CSS to your app.vue:

style is not scoped.

<template>
  <NuxtPage />
</template>

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

Upvotes: 1

emsitkowski
emsitkowski

Reputation: 33

If the transitions don't work for you, remember that the <style> tag in App.vue cannot have a scoped attribute.

Upvotes: 2

jgcarrillo
jgcarrillo

Reputation: 186

Just follow the official documentation for Nuxt 3. You need to add the following code to your nuxt.config.ts file:

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

And then apply the classes inside your app.vue file, like this:

<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

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

Nuxt 3 uses the Vue's <Transition> component under the hood, so you don't need to add it in the template.

Be careful with the css prefix.

Upvotes: 4

Nicola Spadari
Nicola Spadari

Reputation: 735

Nuxt 3 doesn't need a <Transition> wrapper around pages/layouts, by default it does that for you. Take a look at this starter template: in assets/sass/app.scss, the last part of the style is page and layout transition.
You can tweak the default named animations (page- and layout-).
More infos here

Upvotes: -1

Related Questions