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

URL: https://webrandum.net/vue-tags-with-side-effect-are-ignored/
公開日: 2022-04-12
更新日: 2022-04-13
カテゴリー: コーディング
タグ: Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

## postscribeを使う

[![](https://www.google.com/s2/favicons?domain=www.npmjs.com)npm![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/b45ab5f42375fd9298d12bd571f22bcdf8f823ddd5e2a4919e9c8ebc2928475a.webp)postscribehttps://www.npmjs.com/package/postscribeAsynchronously 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.](https://www.npmjs.com/package/postscribe)

[postscribe](https://www.npmjs.com/package/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>`タグはうまくいきませんでした。

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