unplugin-vue-router
Advanced tools
unplugin-vue-router - npm Package Versions
Changelog
0.9.0 (2024-05-28)
Bug Fixes
- move extension handling outside of tree (85d8472), closes #400
- remove wrong error log during HMR (c511082)
- require explicit
routesimport to avoid cyclic imports (63788f6), closes #132
Code Refactoring
- pkg: migrate package to type=module (f1e4ca5)
BREAKING CHANGES
createRouter()now requires the explicitrouterproperty to be set and imported:
import { createRouter, createWebHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'
createRouter({
history: createWebHistory(),
+ routes
})
This also means that runtime extendRoutes() option is not needed. It
has been deprecated and will be removed in the next major release.
TreeandPrefixTreeinsert method expects a path without the file extension. They also expect the fullpath of the file as a second argument (it used to be optional). This aligns better with their responsibility as they shouldn't be trimming the extension like they used to.
// replace
tree.insert('file.vue')
// with
tree.insert('file', resolve('file.vue'))
This shouldn't affect most users as the Tree implementation is used internally to represent the folder structure.
- pkg: The package is now of
"type": "module". It shouldn't break anything for users but this is just in case, we all know how fragile this js ecosystem is sometimes...
Changelog
0.8.4 (2024-02-24)
This patch contains the necessary fixes to allow importing the data loaders. However, they cannot be imported from vue-router/auto nor from unplugin-vue-router/runtime. Instead, they should be imported from unplugin-vue-router/data-loaders/.... This is needed as some of the loaders depends on extra packages that not all users have installed. At the moment, there are two data loaders
unplugin-vue-router/data-loaders/basic: https://uvr.esm.is/data-loaders/basic/unplugin-vue-router/data-loaders/pinia-colada: https://uvr.esm.is/data-loaders/colada/
Bug Fixes
Changelog
0.8.0 (2024-02-22)
Based on the feedback of the RFC, the Data Loaders have been redesigned from the ground up and are now way more flexible and powerful. As a result, if you were using the experimental data loaders, make sure to check the list of breaking changes and the new RFC at https://uvr.esm.is/rfcs/data-loaders. We are looking for early testers and feedback!
For people using the file-based routing, you now need to add unplugin-vue-router/client to the types property of your tsconfig. See setup for an example.
Bug Fixes
- allow errors outside of navigation (ae37a8e)
- avoid uncatchable rejection (fa0c794)
- delay setting the error (3d341ae)
- discard loads from canceled navigations (aac66c1), closes posva/unplugin-vue-router#200
- router.push types (98cb17b)
- run nested loaders once when used across places (73a6cc5)
- types: correct types in navigation guards (3f01155)
- types: correctly extend client (d226cf9)
- types: remove null from non raw star param (0b71ad5)
- types: restrict what can be imported from the package (8748644), closes #289
- types: use
vue-router/auto-routes(2dc0446) - use single alias for reused components on different paths (1544363)
Code Refactoring
- rename
pendingtoisLoading(9502751) - refactor!: remove deprecated APIs (0415b9e)
- refactor(data-loaders)!: rewrite of data loaders (f0b7b58)
- refactor!: remove
setupLoaderGuard(8094f62)
Features
- add pinia colada properties (63a768f)
- commit option (56b2a4d), closes posva/unplugin-vue-router#201
- data-fetching: add server option (d4d2f46)
- data-loaders: abort the signal for old pending locations (afabb47)
- data-loaders: add abort signal to navigation (a175fa7)
- data-loaders: allow changing the navigation result (7a7da74)
- data-loaders: pass the signal to the loader (85d0494)
- handle thrown errors (2e38544)
- inject in nested loaders (b0aa0b3)
- loaders: thrown navigation results take precedence (2aaaf56)
- return a promise of data only (d2dda40)
- run loaders with access to global inject and provide (9d95e27)
- track used params (b2ae763)
Performance Improvements
- compute params once (322f220)
- use a shallowRef for data (aae0c70)
- use for of instead of forEach (1635745)
BREAKING CHANGES
-
Remove the deprecated APIs:
-
createPrefixTree()->new PrefixTree() -
VueRouterExports->VueRouterAutoImports -
Data Loaders have been redesigned to be more flexible and account for other libraries. Notably, the caching behavior has been moved out of the basic loader to an extended one pinia-colada and the basic loader has no cache. All of the pending bugs have also been fixed. I recommend you to give the RFC examples a new read to get setup: https://uvr.esm.is/data-loaders/rfc. Most of the changes are simplifying things by removing them. Here is a list of the breaking changes to simplify migration:
- The
dataFetchingoption is no longer needed. - Manual work needed to add loaders with
HasDataLoaderMetahas been removed. It is just no longer needed. Loaders are picked up from lazy loaded components and must otherwise be directly added to ameta.loadersarray. See the example at https://uvr.esm.is/data-loaders/rfc.html#basic-example - The function
setupDataFetchingGuardhas been replaced with a Vue Plugin. See https://uvr.esm.is/data-loaders/rfc.html#data-loader-setup for details. - If you were relying on
cacheTime, use thestaleTimeoption in the newdefineColadaLoader()based off @pinia/colada - To reduce the dependency on file-based router, things have been
refactored and none of the defineLoader functions are automatically
imported anymore. You can add them yourself to the list of auto
imports, or import them from
unplugin-vue-router/data-loaders/.... The good news is you no longer need to use the plugin in order to benefit from the data loaders; they can be imported even if you don't want file-based routing.
If you find missing information or improvements, please open a Pull Request to improve the
CHANGELOG.md.- The navigation guard is replaced in favor of a Vue plugin:
Replace
import { setupLoaderGuard } from 'vue-router/auto' setupLoaderGuard({ router, app })with
import { DataLoaderPlugin } from 'vue-router/auto' app.use(DataLoaderPlugin, { router })vue-router/auto/routesbecomesvue-router/auto-routes. This change was necessary to improve compatibility with TypeScript and other tools in the ecosystem. Most of the time you don't need to use this path but if you were using it, replace it:
- import { } from 'vue-router/auto/routes' + import { } from 'vue-router/auto-routes'-
Data Loaders now return an
isLoadingproperty instead ofpending. This aligns better with the wording of Data Loaders being in a loading state rather than pending, which can have more meanings. -
You know need to add
unplugin-vue-router/clientto thetypesproperty of your tsconfig. See setup for an example. This file contains the augmentation of thevue-router/automodule that was previously intyped-router.d.ts. You also need to set themodeResolutiontoBundlerin yourtsconfig.json. -
the existing
defineLoaderis being replaced by a basic loader without cache. The version with cache will be implemented by adding a library that properly handles the caching. This new strategy will also enable other integrations like VueFire, Apollo, and custom ones. Keep an eye (subscribe) to the RFC for news and to discus about the future of Data Loaders: https://github.com/vuejs/rfcs/discussions/460 -
since data loaders aren't meant to be awaited in script setup (they are awaited at the navigation level), they now return a promise of the raw data only, not of the UseDataLoaderReturn, to make it clearer that this syntax is a bit special and should only be used within nested loaders. This change also brings other benefits like allowing lazy loaders to be awaited within loaders without changing their usage outside, in components. Also, allowing different types of commit while still allowing data to be awaited within loaders.
- The