`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true`
Open
Nobody has claimed this yet.
bug
workaround available
- Dominant language
- TypeScript
- Stars
- 285
- Forks
- 33
- Avg merge
- 22h 38m
- Merged PRs (30d)
- 3
Description
Environment
- Operating System: Linux
- Node Version: v18.18.0
- Nuxt Version: 2.17.2
- CLI Version: 3.9.1
- Nitro Version: 2.8.1
- Package Manager: npm@9.4.2
- Builder: webpack
- User Config: bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
- Runtime Modules: -
- Build Modules: (), @nuxt/bridge@3.0.0-rc.3-28343365.3c40b3f
Reproduction
https://stackblitz.com/edit/nuxt-starter-v8fpj4
Describe the bug
<title> element of SVG is treated as <Title> component from Nuxt Bridge when meta: true.
It only appears in production build (nuxi build).
- Expected:
<title>inserted into SVG element - Actual: Rendered as HTML title
components/SvgCircle.vue:
<template>
<svg width="100" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<slot />
<circle cx="100" cy="100" r="50" />
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
pages/index.vue:
<template>
<div>
<SvgCircle>
<title>circle</title>
</SvgCircle>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import SvgCircle from '~/components/SvgCircle.vue';
export default defineComponent({
components: {
SvgCircle,
},
});
</script>
nuxt.config.ts:
import { defineNuxtConfig } from '@nuxt/bridge';
export default defineNuxtConfig({
bridge: {
meta: true,
},
});
Output:
<html>
<head>
<title>circle</title>
...
</head>
<body>
<div id="__nuxt">
<!---->
<div id="__layout">
<div>
<svg width="100" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!---->
<circle cx="100" cy="100" r="50"></circle>
</svg>
</div>
</div>
</div>
...
</body>
</html>
Additional context
No response
Logs
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue from components/SvgCircle.vue, pages/index.vue, and nuxt.config.ts using the StackBlitz example and nuxi build. Inspect the production handling enabled by bridge.meta; done means the SVG title remains inside the SVG and is not rendered as the document's HTML title.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript, webpack
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100