feat(nuxt): upgrade to vue-router v5#34181
Conversation
|
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub. |
@nuxt/kit
@nuxt/nitro-server
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughImports and type imports for router utilities were changed from 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Merging this PR will not alter performance
Comparing 
Footnotes
|
|
|
||
| /** | ||
| * Enable the new experimental typed router using [unplugin-vue-router](https://github.com/posva/unplugin-vue-router). | ||
| * Enable the new experimental typed router using vue-router. |
There was a problem hiding this comment.
I would happily enable this by default in a future minor if you consider it stable enough.
There was a problem hiding this comment.
Oh that’s true. I think that if we keep some intermediate types as internal, this should be good to go stable
|
I also think we could automatically add the volar plugin to the tsconfig |
# Conflicts: # package.json # packages/nuxt/package.json # packages/schema/package.json # pnpm-lock.yaml
…router-5 # Conflicts: # packages/nuxt/package.json # pnpm-lock.yaml
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/nuxt/src/pages/module.ts (1)
327-344: Make Volar plugin injection idempotent.If this hook runs more than once or users already configure these plugins, blindly pushing can duplicate entries and create noisy tsconfig diffs. Consider de‑duplicating by name before pushing.
♻️ Suggested idempotent plugin insertion
// Add vue-router volar plugins to tsconfig tsConfig.vueCompilerOptions ||= {} tsConfig.vueCompilerOptions.plugins ||= [] - - // Always add <route> block support - tsConfig.vueCompilerOptions.plugins.push('vue-router/volar/sfc-route-blocks') + const plugins = tsConfig.vueCompilerOptions.plugins + const hasPlugin = (name: string) => + plugins.some(p => (typeof p === 'string' ? p === name : p?.name === name)) + const addPlugin = (plugin: string | { name: string; options?: Record<string, any> }) => { + const name = typeof plugin === 'string' ? plugin : plugin.name + if (!hasPlugin(name)) { plugins.push(plugin as any) } + } + + // Always add <route> block support + addPlugin('vue-router/volar/sfc-route-blocks') // Add typed useRoute() when typedPages is enabled if (useExperimentalTypedPages) { - tsConfig.vueCompilerOptions.plugins.push({ + addPlugin({ name: 'vue-router/volar/sfc-typed-router', options: { rootDir: nuxt.options.rootDir }, }) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/nuxt/src/pages/module.ts` around lines 327 - 344, The prepare:types hook currently always pushes volar plugins into tsConfig.vueCompilerOptions.plugins causing duplicates; update the nuxt.hook('prepare:types', ...) logic to make insertion idempotent by checking tsConfig.vueCompilerOptions.plugins for existing entries before pushing: treat string entries (like 'vue-router/volar/sfc-route-blocks') and object entries (match by name property, e.g. 'vue-router/volar/sfc-typed-router') as already present and only push when missing, preserving existing plugin objects and options (use the existing array on tsConfig.vueCompilerOptions.plugins and perform a de-duplication check by value/name prior to push).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/nuxt/src/pages/module.ts`:
- Around line 327-344: The prepare:types hook currently always pushes volar
plugins into tsConfig.vueCompilerOptions.plugins causing duplicates; update the
nuxt.hook('prepare:types', ...) logic to make insertion idempotent by checking
tsConfig.vueCompilerOptions.plugins for existing entries before pushing: treat
string entries (like 'vue-router/volar/sfc-route-blocks') and object entries
(match by name property, e.g. 'vue-router/volar/sfc-typed-router') as already
present and only push when missing, preserving existing plugin objects and
options (use the existing array on tsConfig.vueCompilerOptions.plugins and
perform a de-duplication check by value/name prior to push).
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/nuxt/src/pages/module.ts (1)
327-345: Avoid duplicate Volar plugins intsconfig.If users already add these plugins, the current
pushcalls can create duplicates. Consider de‑duping by name before pushing.Suggested tweak
tsConfig.vueCompilerOptions ||= {} tsConfig.vueCompilerOptions.plugins ||= [] + const plugins = tsConfig.vueCompilerOptions.plugins + const hasPlugin = (name: string) => + plugins.some(p => (typeof p === 'string' ? p === name : p?.name === name)) // Always add <route> block support - tsConfig.vueCompilerOptions.plugins.push('vue-router/volar/sfc-route-blocks') + if (!hasPlugin('vue-router/volar/sfc-route-blocks')) { + plugins.push('vue-router/volar/sfc-route-blocks') + } // Add typed useRoute() when typedPages is enabled if (useExperimentalTypedPages) { - tsConfig.vueCompilerOptions.plugins.push({ - name: 'vue-router/volar/sfc-typed-router', - options: { rootDir: nuxt.options.rootDir }, - }) + if (!hasPlugin('vue-router/volar/sfc-typed-router')) { + plugins.push({ + name: 'vue-router/volar/sfc-typed-router', + options: { rootDir: nuxt.options.rootDir }, + }) + } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/nuxt/src/pages/module.ts` around lines 327 - 345, In the nuxt.hook('prepare:types', ...) block avoid pushing duplicate Volar plugins into tsConfig.vueCompilerOptions.plugins by checking existing entries (which may be strings or objects) before pushing: verify that 'vue-router/volar/sfc-route-blocks' is not already present as a string, and when useExperimentalTypedPages is true check that no plugin object has name === 'vue-router/volar/sfc-typed-router' before adding the typed-router plugin; perform these membership checks on tsConfig.vueCompilerOptions.plugins and only push when the plugin is absent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/nuxt/src/pages/module.ts`:
- Around line 327-345: In the nuxt.hook('prepare:types', ...) block avoid
pushing duplicate Volar plugins into tsConfig.vueCompilerOptions.plugins by
checking existing entries (which may be strings or objects) before pushing:
verify that 'vue-router/volar/sfc-route-blocks' is not already present as a
string, and when useExperimentalTypedPages is true check that no plugin object
has name === 'vue-router/volar/sfc-typed-router' before adding the typed-router
plugin; perform these membership checks on tsConfig.vueCompilerOptions.plugins
and only push when the plugin is absent.
|
Exciting! Thanks for finalizing this @posva and @danielroe! Very curious about user feedback on the Volar plugins. |
|
After upgrading to @posva @danielroe Is this expected after the removal of 
|
|
@adamdehaven Could you create an issue with a repro? Note that online repro's don't always work, so a repository is fine too. |
|
Odd... working on a net-new install 🤔 |
📚 Description
This is a WIP PR to upgrade to vue-router 5 and remove the dependency on unplugin-vue-router.
Should be merged after vue-router 5 is released (without the beta tag)