vue <template> 안에 <script> tag 사용하기

any_filename.vue에서 다음과 같이 <template> 안에 <script>를 작성하는 경우 에러가 발생한다.

<template>

  <div id="app">

   <v-row>

      <v-col height="100%" width="50%">

 

<!-- 외부 스크립트 또는 기타 -->

<script type="text/javascript">

...

</script>

 

...

</template>

 

Failed to compile.

./src/views/Facade.vue?vue&type=template&id=efb03358& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"01f4ff74-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Facade.vue?vue&type=template&id=efb03358&) Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed. 11 | <div id="view_de346"></div>

 

<!-- 외부 스크립트 또는 기타 -->

<script type="application/javascript">와 같이 text -> application으로 바꾸어 주면 해결된다.

 

reference : 가우테 멕 올슨 (gaute.dev)