nuxt-contextual-transition v0.1.3

Nuxt Contextual Transition

The Nuxt module for using the Vue Contextual Transition package. This module provides the following conveniences for Nuxt over using the Vue Contextual Transition package directly:

1. It automatically imports the required useContextualTransition function.
2. It automatically imports the required css.
3. It automatically deals with retaining the scroll position when navigating between pages.

• ✨  Release Notes

This module makes it easier to provide meaningful cross-browser transitions between pages — or other state changes if desired — for Nuxt projects. It provides a single opinionated transition that can animate in two ways, and looks like this:

The two styles are:

1. Shared Element Transition: intended for navigating up and down a site's hierarchy, for example, from a blog index to a blog post. Individual elements, like a post title and a thumbnail image, can be transitioned from their appearance on an index page to their appearance on a post page, and back. Not to be confused with the experimental Chrome feature, View Transitions.

   An element can be designated for transitioning like this:

   <img
     src="..."
     v-shared-element="{ id: post.slug, role: 'image', type: 'post' }"
   />

2. Relative Slide Transition: intended for navigating laterally in a site's hierarchy, that is, between pages of like-content such as navigating from a current blog post to an older blog post. Content can slide horizontally (or vertically if preferred).

   A page view can be designated for transitioning like this:

   <template>
     <div v-relative-slide="{ value: post.sortOrder, type: 'post' }">
       <!-- page content -->
     </div>
   </template>

In both cases, content and element relationships are declared via directives.

Quick Setup

1. Add nuxt-contextual-transition dependency to your project

# Using pnpm
pnpm add -D nuxt-contextual-transition

# Using yarn
yarn add --dev nuxt-contextual-transition

# Using npm
npm install --save-dev nuxt-contextual-transition

2. Add nuxt-contextual-transition to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-contextual-transition'
  ]
})

Then, in app.vue or wherever you have your root <NuxtPage />:

<script setup>
const contextualTransition = useContextualTransition();
</script>

<template>
  <div class="contextual-transition-container">
    <NuxtPage :transition="contextualTransition">
  </div>
</template>

You can then apply the directives to views and individual elements as indicated above.

Please see the Vue Contextual Transition docs for details.