Load script inside the <template> tag using nuxt.js and vue.js

Question

I am using nuxt.js (which is based on vue.js) to build a custom website, I need to load an Ad on my website using a provided by my partners, and I need to place it at a specific place on my html code. So I add it to my component template but it does not render. Here is a sample of the code I'm trying to get to work

<template>
  <div>
    <div class="columns is-centered is-mobile">
      <p>Hello World</p>
    </div>
    <div>
      <script type="text/javascript" src="sampleSource"></script>
    </div>
  </div>
</template>
<script>
  export default {
  }
</script>

the script that comes from src="sampleSource" doesn't load and doesn't execute, any help is appreciated. Thank you very much.

Adriano Resende · Accepted Answer · 2019-05-20 12:18:36Z

4

On the page, use in metadata with body: true for add script inside body

<script>
export default {
  head: {
    script: [
      { src: '/head.js' },
      // Supported since Nuxt 1.0
      { src: '/body.js', body: true },
      { src: '/defer.js', defer: '' }
    ]
  }
}
</script>

edited May 20, 2019 at 12:18

answered May 3, 2018 at 14:23

Adriano Resende

2,6291 gold badge31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamocsai Kamo András · Accepted Answer · 2018-05-04 11:51:30Z

2

You need to create a (sample-source.vue) component and take it to the /components dir. After that you need to create a plugin for your component: /plugins/sample-source.js

sample-source.js :

import Vue from 'vue'
import SampleSource from '~/components/sample-source.vue'

Vue.use(SampleSource)

nuxt.config.js:

...
module.export
...
plugins: [
  '~/plugins/sample-source.js'
]

After these steps you can use your component everywhere.

Or the easiest way:

<template>
  <div>
    <div class="columns is-centered is-mobile">
      <p>Hello World</p>
    </div>
  </div>
</template>
<script>
  export default {
    mounted () {
----your code here from sampleSource.js----
    }
  }
</script>

answered May 4, 2018 at 11:51

Kamocsai Kamo András

1741 silver badge3 bronze badges

Collectives™ on Stack Overflow

Load script inside the <template> tag using nuxt.js and vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related