WebDesigner's Memorandumウェブデザイナーの備忘録

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

Vue.jsで内にやタグを生成する方法|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を使う

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>タグはうまくいきませんでした。

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね