test: add page transition

test/basic.test.ts

@@ -523,7 +523,7 @@ describe('pages', () => {
 
     // that page should be client rendered
     // TODO: investigate why multiple elements are appearing on page
-    expect(await clientInitialPage.locator('#server-rendered').first().textContent()).toMatchInlineSnapshot('"false"')
+    expect(await clientInitialPage.locator('#server-rendered').textContent()).toMatchInlineSnapshot('"false"')
     // and not contain any errors or warnings
     expect(errors.length).toBe(0)
 

test/fixtures/basic/app.vue

@@ -0,0 +1,17 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage /> 
+    </NuxtLayout>
+</template>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.1s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

test/fixtures/basic/nuxt.config.ts

@@ -13,7 +13,7 @@ declare module 'nitropack' {
 
 export default defineNuxtConfig({
   app: {
-    pageTransition: true,
+    pageTransition: { name: 'page', mode: 'out-in' },
     layoutTransition: true,
     teleportId: 'nuxt-teleport',
     teleportTag: 'span',