fix(nuxt): remove assets alias for all resolvers
#32598
Conversation
|
|
WalkthroughThe changes remove references to the 'assets' directory from directory resolution and aliasing logic across multiple packages. In the schema configuration, 'assets' is no longer included in the list of directories checked for existence, and its default mapping in the directory configuration object is deleted. In both the Vite and Webpack build configurations, the alias entry for the assets directory, previously keyed by its basename, is removed along with the related import of the basename function. Additionally, the ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
assets alias for all resolversassets alias for all resolvers
@nuxt/kit
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #32598 will not alter performanceComparing Summary
|
| @@ -89,7 +89,6 @@ export const bundle: NuxtBuilder['bundle'] = async (nuxt) => { | |||
| }, | |||
| resolve: { | |||
| alias: { | |||
| [basename(nuxt.options.dir.assets)]: resolve(nuxt.options.srcDir, nuxt.options.dir.assets), | |||
There was a problem hiding this comment.
I think we need to keep this entry here and in the webpack presets until vuejs/core#13462 merges.
see 03d7c6e
There was a problem hiding this comment.
Okay. Looks like vuejs/core#13462 comes with next minor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/schema/src/config/app.ts(1 hunks)test/bundle.test.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- test/bundle.test.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .github/copilot-instructions.md
**/*.{ts,tsx,vue}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .github/copilot-instructions.md
🧠 Learnings (2)
📓 Common learnings
Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.
Learnt from: Tofandel
PR: nuxt/nuxt#0
File: :0-0
Timestamp: 2024-11-11T12:34:22.648Z
Learning: Ensure that AI-generated summaries accurately reflect the key changes in the PR, focusing on notable changes such as the removal of unused imports and variables starting with underscores.
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Remove code that is not used or needed
Learnt from: huang-julien
PR: nuxt/nuxt#29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In `packages/nuxt/src/app/components/nuxt-root.vue`, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:
```js
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : null
```
instead of wrapping the import in a computed property or importing the component unconditionally.
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitest
Learnt from: GalacticHypernova
PR: nuxt/nuxt#29661
File: packages/kit/src/template.ts:227-229
Timestamp: 2024-11-28T21:22:40.496Z
Learning: In `packages/kit/src/template.ts`, when updating the `EXTENSION_RE` regular expression for TypeScript configuration, avoid using patterns like `(\.\w+)+$` as they can result in catastrophic backtracking.
packages/schema/src/config/app.ts (6)
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Remove code that is not used or needed
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Add comments only to explain complex logic or non-obvious implementations
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx} : Follow standard TypeScript conventions and best practices
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Use clear, descriptive variable and function names
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Socket Security: Pull Request Alerts
| preserveTilde: true, | ||
| tags: { | ||
| video: ['src', 'poster'], | ||
| source: ['src'], | ||
| img: ['src'], | ||
| image: ['xlink:href', 'href'], | ||
| use: ['xlink:href', 'href'], | ||
| }, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify the Vue transformAssetUrls API structure for correctness.
The configuration structure has been updated to nest tag mappings under a tags object and add a preserveTilde flag. This appears to align with a newer Vue API format, but please verify this matches the expected structure.
🌐 Web query:
What is the correct structure for Vue's transformAssetUrls configuration in the latest version? Does it support a preserveTilde option and require tag mappings to be nested under a tags object?
💡 Result:
The correct structure for Vue's transformAssetUrls configuration in the latest versions (Vue Loader v16+, Vite + @vitejs/plugin-vue, Vue 3) remains a flat object, mapping tag names to attribute names or arrays of attribute names. The standard structure is as follows:
{
transformAssetUrls: {
img: 'src',
image: ['xlink:href', 'href'],
source: 'src',
video: ['src', 'poster'],
use: ['xlink:href', 'href'],
// custom tag/attribute mappings as needed
}
}Tag mappings do not need to be nested under a tags object; the tag name is the top-level key[2][5][8].
Example from Official Docs
The default value for
transformAssetUrlsis:{ video: ['src', 'poster'], source: 'src', img: 'src', image: ['xlink:href', 'href'], use: ['xlink:href', 'href'] } ```[2][5]
Custom Component Support
If you’re using custom components (like from BootstrapVue or Vuetify), simply add them directly as keys on the root of the transformAssetUrls object—not inside a tags object[5].
preserveTilde Option
There is no official preserveTilde option supported in the mainline vue-loader, @vitejs/plugin-vue, or the Vite ecosystem, as of 2025. The handling of the tilde (~) prefix for asset paths (used to indicate webpack aliases) has changed in recent build tools:
- In Vite, the tilde alias is deprecated and not processed the same way as in webpack.
- If you want to preserve
~or handle special aliases, you must rely on Vite's alias configuration or preprocess your paths, but there is nopreserveTildeflag intransformAssetUrls[2][3][5].
Summary Table
| Feature | Supported | Notes |
|---|---|---|
| Flat object (tag: attrs) mapping | Yes | Tag names map directly to attrs on root object. |
Nested tags object |
No | Not required or supported. |
preserveTilde option |
No | No such option in official plugins/loaders. |
In summary, keep transformAssetUrls as a flat object of tag/attr mappings, and do not use a nested tags object or expect support for a preserveTilde option[2][5][8]. For handling tilde, manage aliases at the build tool config level instead.
Citations:
- 1: https://nuxt.com/docs/api/nuxt-config
- 2: https://vue-loader.vuejs.org/options.html
- 3: https://nuxt.vuetifyjs.com/guide/transform-asset-urls.html
- 4: https://laravel.com/docs/12.x/vite
- 5: https://bootstrap-vue.org/docs/reference/images/
- 6: https://vue-select.org/guide/values.html
- 7: @vitejs/plugin-vue does not allow absolute asset URLs to be preserved as-is vitejs/vite#4836
- 8: https://www.npmjs.com/package/vue-template-loader
- 9: https://objectcomputing.com/resources/publications/sett/january-2018-room-with-a-vue-part-1
- 10: https://laracasts.com/index.php/discuss/channels/general-discussion/issues-working-with-vue-3-vite-and-single-file-componenets-inside-blade-files
transformAssetUrls configuration needs to be a flat mapping
The current nesting under a tags object and the preserveTilde flag are not supported by Vue’s official transformAssetUrls API. You must:
• Remove the preserveTilde: true property
• Lift all tag entries out of the tags object into the root of transformAssetUrls
Locations to update:
- packages/schema/src/config/app.ts (around lines 10–17)
Suggested diff:
- vue: {
- transformAssetUrls: {
- preserveTilde: true,
- tags: {
- video: ['src', 'poster'],
- source: ['src'],
- img: ['src'],
- image: ['xlink:href', 'href'],
- use: ['xlink:href', 'href'],
- },
- },
- },
+ vue: {
+ transformAssetUrls: {
+ video: ['src', 'poster'],
+ source: 'src',
+ img: 'src',
+ image: ['xlink:href', 'href'],
+ use: ['xlink:href', 'href'],
+ },
+ },🤖 Prompt for AI Agents
In packages/schema/src/config/app.ts around lines 10 to 17, the
transformAssetUrls configuration incorrectly nests tag mappings under a tags
object and includes a preserveTilde property, which Vue's official API does not
support. To fix this, remove the preserveTilde property entirely and move all
tag-to-attribute mappings out of the tags object to be direct properties of
transformAssetUrls at the root level.
There was a problem hiding this comment.
Lift all tag entries out of the
tagsobject into the root oftransformAssetUrls
From vue changelog 3.0.0-beta.9
compiler-sfc: @vue/compiler-sfc's transformAssetUrlsBase option has been removed. It is merged into trasnformAssetUrls which now also accepts the format of
{
base?: string
includeAbsolute?: string
tags?: { [name: string]: string[] }
}
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
|
@danielroe I have prepared this PR to be compatible when vuejs/core#13462 gets merged. I moved the legacy Tests are passing locally with: |
🔗 Linked issue
fixes #32657
📚 Description
This PR follows up on #32119 and is wating for vuejs/core#13462