Vue.jsでtemplateタグ内にscriptやstyleタグを生成する方法｜Tags with side effect are ignored

Vue.jsで<template>タグ内で動的に<script>タグや<style>タグを生成しようとするとコンパイル時に下記のエラーが出てしまいます。

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

そもそも<template>内に書くのはNGということみたいですが、今回はその回避方法をいくつかまとめておきます。

postscribeを使う

npm

postscribe

https://www.npmjs.com/package/postscribe

Asynchronously write javascript, even with document.write.. Latest version: 2.0.8, last published: 5 years ago. Start using postscribe in your project by running `npm i postscribe`. There are 48 other projects in the npm registry using postscribe.

postscribeというパッケージを使えば回避できます。
まずは下記コマンドでnpmインストールしましょう。

npm install -D postscribe

使用するときはmounted内でpostscribe()を呼び出し、設定したいタグを設定します。

<template>
  <div id="script"></div>
</template>

<script>
import postscribe from 'postscribe'
export default {
  name: 'postscribe-sample',
  mounted() {
    postscribe('#script', `<script src="https://gist.github.com/gautemo/d6b309c2bafe8f611f239b82f4f5501f.js"><\/script>`)
  }
}
</script>

HTMLのis属性を使う

HTMLにはis属性があり、これを使うとタグを別の扱いにできます。
下記のように記述すると<div>タグが<style>タグとして扱われます。

<div is="style"> body { background: red; } </div>

ただ、この方法だと<style>タグは扱えますが、<script>タグはうまくいきませんでした。

本当にハック的な方法ですし、他の人が見たりある程度時間が経ってから見て混乱するので、最終手段です。