Nuxt 3 beta is out! Discover more about it on v3.nuxtjs.org

Discover
Showcases
Showcases

Selection of websites built with Nuxt

Case studies
Case studies

How companies use Nuxt

Testimonials
Testimonials

What they think about us

Learn
Docs
Docs

Create fast websites easily

Examples
Examples

Understand everything in Nuxt

Tutorials
Tutorials

Learn with concrete cases

Master courses
Master courses

Learn more with experts

Explore
Deployments
Deployments

How to Deploy Nuxt

Modules
Modules

Extend the power of Nuxt

Themes
Themes

Get started with themes

Video Courses
Video Courses

Learn step by step

Community
Announcements
Announcements

Latest news about Nuxt

Teams
Teams

They are Nuxt

Releases
Releases

All the code we have released

Sponsors
Sponsors

They trust us

Partners
English
Français
日本語
  • Get Started
    • Installation
    • Routing
    • Directory Structure
    • Commands and Deployment
    • Conclusion
    • Upgrading
  • Concepts
  • Features
  • Directory Structure
  • Configuration Glossary
  • Internals Glossary
  • Components Glossary
    • The Fetch Hook
    • The head Method
    • The key Property
    • The layout Property
    • The loading Property
    • The middleware Property
    • The page transition Property
    • The scrollToTop Property
    • The validate Method
    • The watchQuery Property
    • The watchParam Property
Version: v2.15.8 Version: v3.x (Beta)
English
Français
日本語
  • Get Started
    • Installation
    • Routing
    • Directory Structure
    • Commands and Deployment
    • Conclusion
    • Upgrading
  • Concepts
  • Features
  • Directory Structure
  • Configuration Glossary
  • Internals Glossary
  • Components Glossary
    • The Fetch Hook
    • The head Method
    • The key Property
    • The layout Property
    • The loading Property
    • The middleware Property
    • The page transition Property
    • The scrollToTop Property
    • The validate Method
    • The watchQuery Property
    • The watchParam Property
Version: v2.15.8 Version: v3.x (Beta)

The key property

Set the key property of internal <router-view> component


  • Type: String or Function

The key property is propagated into <router-view>, which is useful to make transitions inside a dynamic page and different route. Different keys result in re-rendering of page components.

There are several ways to set the key. For more details, please refer to the nuxtChildKey prop in the nuxt component .

export default {
  key(route) {
    return route.fullPath
  }
}
Edit this page on GitHub Updated at Mon, Feb 28, 2022
Leoš Literák Leoš Literák Trizotti Trizotti Clément Ollivier Clément Ollivier Sébastien Chopin Sébastien Chopin Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy felipesuri felipesuri Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli Sylvain Marroufin Sylvain Marroufin Kareem Dabbeet Kareem Dabbeet tramplay tramplay Daniel Roe Daniel Roe verebelyicsaba verebelyicsaba Adam Adam Nate Butler Nate Butler Sandra Rodgers Sandra Rodgers Arpit Patidar Arpit Patidar Matthew Kuehn Matthew Kuehn Steven DUBOIS Steven DUBOIS Travis Lindsey Travis Lindsey syagawa syagawa Maxime Maxime かる かる Al Power Al Power Florent Delerue Florent Delerue quanghm quanghm José Manuel Casani Guerra José Manuel Casani Guerra Unai Mengual Unai Mengual kazuya kawaguchi kazuya kawaguchi Michael Lynch Michael Lynch Tomachi Tomachi pooya parsa pooya parsa Meir Roth Meir Roth Brett Brett Adam Miedema Adam Miedema Thomas Bnt Thomas Bnt Kazuki Furukawa Kazuki Furukawa Anthony Ruelle Anthony Ruelle Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Roman Harmyder Roman Harmyder

A landscape image A landscape image

About

  • Contact us
  • Enterprise support
  • NuxtLabs company
  • Open Source Software
  • Partnerships
  • Telemetry

Ecosystem

  • Announcements
  • Contribute
  • Chat with us
  • Events
  • Sponsors
  • Teams
  • Tutorials
  • Video courses

Resources

  • Design
  • Documentation
  • Examples
  • Deployments
  • Master courses
  • Modules
  • Releases
  • Showcases
  • Themes

Newsletter

The latest news, articles, and resources, sent to your inbox monthly.