2

I can use a meta tag with intertia-head no problems:

<inertia-head>
    <meta name="test" content="..." />
</inertia-head>

If I try to use a script tag however, I get a compile error:

<inertia-head>
    <script type="application/javascript" src="..."></script>
</inertia-head>

Here is the error:

VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates

Is there any way around this? I realise I can modify the server-side template that create the <head> element, but I'd rather not do this since it is used for the entire site.

DatsunBing
  • 8,684
  • 17
  • 87
  • 172

1 Answers1

0

I haven't found a solution for Inertia, and I don't think there is one, as the documentation is not referencing any such possibility.

So I think the solution to this would be do it the "native js" way within vue, which answer I have found here: How to add external JS scripts to VueJS Components?

Credit: mejiamanuel57

  <template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

It works for me.

If you are using Vue3 with "setup", then you need to pull in the onMounted() method.

theMaertin
  • 71
  • 6