Vue 컴포넌트에 외부 스크립트 추가 (메모용)

작업을 하다가 제이쿼리를 필요로 하는 스크립트를 추가하게 되어서 알게되었습니다.

export default에 head: { script 를 추가하여 사용할 수 있다.

간단한 것이지만.. 이제 이걸 알았다는 것에 배움이 많이 부족하다 느꼈습니다.

<template>
</template>

<script>
export default {
  head: {
    script: [
      {
        src: 'https://code.jquery.com/jquery-1.12.4.min.js',
      },
    ]
  },
}
</script>

 

2022.11.22 추가

Vue3와 Vite 환경에서는 위 처럼 작성하면 동작하지 않는다고 하네요.

<template>다중</template>
<script>
export default {
  created() {
    const scripts = ['https://code.jquery.com/jquery-1.12.4.min.js']
    scripts.forEach(script => {
      let tag = document.createElement('script')
      tag.setAttribute('src', script)
      document.head.appendChild(tag)
    })
  }
}
</script>

 

<template>단일</template>
<script>
export default {
  created() {
    const tag = document.createElement('script')
    tag.setAttribute('src', 'https://code.jquery.com/jquery-1.12.4.min.js')
    document.head.appendChild(tag)
  }
}
</script>