`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true` #1007

yckimura · 2023-12-06T13:00:58Z

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

The text was updated successfully, but these errors were encountered:

yckimura · 2023-12-06T13:05:40Z

To workaround this, unset the Title component on components:extend hook.

import { defineNuxtConfig } from '@nuxt/bridge';
import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtConfig({
  bridge: {
    meta: true,
  },
  modules: [
    defineNuxtModule((options, nuxt) => {
      nuxt.hook('components:extend', (components) => {
        const foundIndex = components.findIndex(
          (x) => x.pascalName === 'Title'
        );
        if (foundIndex !== -1) {
          components.splice(foundIndex, 1);
        }
      });
    }),
  ],
});

yckimura added the pending triage label Dec 6, 2023

wattanx added bug Something isn't working workaround available and removed pending triage labels Dec 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true` #1007

`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true` #1007

yckimura commented Dec 6, 2023 •

edited

yckimura commented Dec 6, 2023

<title> element of SVG is treated as <Title> component from Nuxt when meta: true #1007

<title> element of SVG is treated as <Title> component from Nuxt when meta: true #1007

Comments

yckimura commented Dec 6, 2023 • edited

Environment

Reproduction

Describe the bug

Additional context

Logs

yckimura commented Dec 6, 2023

`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true` #1007

`<title>` element of SVG is treated as `<Title>` component from Nuxt when `meta: true` #1007

yckimura commented Dec 6, 2023 •

edited