Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
yckimura opened this issue Dec 6, 2023 · 1 comment
Open

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

yckimura opened this issue Dec 6, 2023 · 1 comment
Labels
bug Something isn't working workaround available

Comments

@yckimura
Copy link

yckimura commented Dec 6, 2023 •
edited
Loading

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: [email protected]
  • Builder: webpack
  • User Config: bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
  • Runtime Modules: -
  • Build Modules: (), @nuxt/[email protected]

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
@yckimura
Copy link
Author

yckimura commented Dec 6, 2023

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);
        }
      });
    }),
  ],
});

@wattanx wattanx added bug Something isn't working workaround available and removed pending triage labels Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working workaround available
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@wattanx @yckimura