如何将 json-ld 添加到 Vue 3？

如何解决如何将 json-ld 添加到 Vue 3？

尝试将 json-ld 脚本标记添加到传送到 HEAD 的部分时，Vue 3 编译器失败并显示以下错误：

VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates.

模板：

<template>
  <teleport to="head">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org","@type": "WebSite","url": "https://www.example.com/","potentialAction": {
          "@type": "SearchAction","target": "https://query.example.com/search?q={search_term_string}","query-input": "required name=search_term_string"
        }
      }
    </script>
  </teleport>
  <div>
    Hello World!
  </div>
</template>

如何在不安装其他依赖项的情况下添加这个 json-ld 标签？

解决方法

一种解决方法是使用 Vue 的 built-in component（即 <component :is="'script'">）而不是 <script>：

<template>
  <teleport to="head">
    <component :is="'script'" type="application/ld+json">
      {
        "@context": "https://schema.org","@type": "WebSite","url": "https://www.example.com/","potentialAction": {
          "@type": "SearchAction","target": "https://query.example.com/search?q={search_term_string}","query-input": "required name=search_term_string"
        }
      }
    </component>
  </teleport>
  <div>
    Hello world!
  </div>
</template>

demo