Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法になります。
Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法
<template>
<button @click="importScript">click</button>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
methods: {
importScript() {
const script = document.createElement('script')
script.setAttribute('src', 'https://www.youtube.com/iframe_api')
script.setAttribute('id', 'script_id')
document.head.appendChild(script)
}
}
})
</script>
上記のコードではボタンをクリックをしたら外部のjsファイルを読み込みます。
読み込んだjsファイルの関数にはwindowでアクセスすることができます。
読み込んだjsファイルを削除する例
ページを離脱する時などに読み込んだjsファイルを削除する方法です。
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
beforeDestroy() {
const script = document.getElementById('script_id')
if (script) {
script.parentNode.removeChild(script)
}
},
methods: {
importScript() {
const script = document.createElement('script')
script.setAttribute('src', 'https://www.youtube.com/iframe_api')
script.setAttribute('id', 'script_id')
document.head.appendChild(script)
}
}
})
</script>
外部ファイルを読み込むだけならheadの中に記述すればOK
普通に外部のファイルを読み込む場合は、headの中に記述することで可能です。
<script lang="ts">
export default Vue.extend{
head() {
return {
script: [
{
src: 'https://www.youtube.com/iframe_api'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto'
}
]
}
}
}
</script>
下記の記事でも解説しています。