Skip to content

vue/no-v-text-v-html-on-component on a g svg element #2602

Closed as not planned
Closed as not planned
@JollyGood1

Description

@JollyGood1

Checklist

  • I have tried restarting my IDE and the issue persists.
  • I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: 9.13.0
  • eslint-plugin-vue version: 9.29.0
  • Vue version: 3.5.12
  • Node version: 18.18.0
  • Operating System: windows 10

Please show your full configuration:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from 'typescript-eslint';
import pluginVue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";


export default [
	{
		files: ["**/*.{js,mjs,cjs,vue}"]
	},
	{
		languageOptions: {
			globals: globals.browser,
			parser: vueParser,
			parserOptions: {
				parser: tseslint,
				sourceType: "module",
				vueFeatures: {
					interpolationAsNonHTML: true
				}
			},
		}
	},
	{
		ignores: ["*.js.snap"],
	},
	pluginJs.configs.recommended,
	...pluginVue.configs["flat/recommended"],
	{
		rules: {
			// *** Priority A: Essential
			"vue/no-unused-components": "off",
			// Priority C: Recommended
			"vue/no-v-html": "off"
		}
	}
];

What did you do?

I have a code that looks something on the lines of this:

<svg>
    <g v-html="shape" />
</svg

What did you expect to happen?

I expected no error since g is an svg element and not a component

What actually happened?

I'm getting this error:

Using v-html on component may break component's content vue/no-v-text-v-html-on-component

Repository to reproduce this issue
Is a repository truly necessary?
I just use this code, it's pretty straight forward:

<template>
    <g v-html="shape" />
</template>

<script setup>
    const shape = ref('<path fill="#000000" d="M50,0 L58.82,37.86 L97.55,34.55 L64.27,54.64 L78.39,90.45 L50,65 L21.61,90.45 L35.73,54.64 L2.45,34.55 L41.18,37.86 Z"></path>');
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions