v4.1

[posva]

This branch is periodically publish as vue-router@edge:

ni vue-router@edge
pnpm add vue-router@edge
npm i vue-router@edge

to try it out!

---

Vue Router 4.1

We are excited to announce the release of Vue Router 4.1 with a few new interesting features, better support for Node ESM and no breaking changes.

Omitting the component/components option in routes

It's now possible to completely omit the component option when defining routes with children. While nested routes are about defining layouts, they are also directly connected to a path and users often found themselves defining a pass through component that would just render a <RouterView> component to reuse the path structure. You can simplify this to:

- import { RouterView } from 'vue-router'
- import { h } from 'vue'
-
 const routes = [
   {
     path: '/admin',
-     component: () => h(RouterView),
     children: [
       { path: 'users', component: AdminUserList },
       { path: 'users/:id', component: AdminUserDetails },
     ],
   },
 ]

In other words, you can now nest paths without having to define a component.

Passing History State in navigations

Passing History State through router.push() has been implemented and used by the router since its version 4.0 but hasn't been exposed as a public API until now. This enables passing a state property when calling router.push() or router.replace(). This is useful to pass global state to be associated with the history entry that cannot be shared by copying the URL. One common example of this are Modals:

// go to /users/24 but show a modal instead
router.push({ name: 'UserDetail', params: { id: 24 } state: { backgroundView: ... } })

To see a full example, check the modal e2e test, it has been updated to use the state property.

It's worth noting this shouldn't be used to pass fetched data or complex objects such as classes because of type of properties and size limitations. Check the History State documentation for more information about the state property.

Give the nature of the <RouterView>'s route prop, there is also a new function loadRouteLocation() that can be used on a resolved route location to load a route with lazy loading:

import { loadRouteLocation } from 'vue-router'

const loadedRoute = await loadRouteLocation(router.resolve('/users/24'))

Typed Routes

In v4.1 we were initially planning to introduce types to automatically detect the params from a path property, creating autocomplete and type safety in router.push() and <RouterLink>'s to prop but it turned out to be extremely slow after 50 routes due to the nature of the types relying on nesting and complex tuples. Instead we are introducing a build plugin to generate the types of the routes for you based your file structure. This is similar to Nuxt and Vite Plugin Pages but with full type support. The plugin supports Vite, Webpack, and rollup and it's currently experimental to gather feedback from the community. We hope to release a stable version of it in the following months.

Check out the plugin GitHub repository for installation instructions and documentation.

Here are some other examples

CJS/MJS support for Node

We know expose a few extra entry points for Node but kept the old ones as well to prevent any disruption to the existing users. You can find more information about this in the corresponding pull request.

[netlify]

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	6355d8f
🔍 Latest deploy log	https://app.netlify.com/sites/vue-router/deploys/62bc7ce9f039ac00091ddb05

[github-actions]

Size report

Path	Size
vue-router.global.prod.js	9.21 KB (+2.45% 🔺)
webRouter.js	8.45 KB (+0.27% 🔺)

[codecov-commenter]

Codecov Report

❗ No coverage uploaded for pull request base (main@063cd45). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1397   +/-   ##
=======================================
  Coverage        ?   90.74%           
=======================================
  Files           ?       24           
  Lines           ?     1102           
  Branches        ?      339           
=======================================
  Hits            ?     1000           
  Misses          ?       63           
  Partials        ?       39           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 063cd45...6355d8f. Read the comment docs.