Skip to content

Nuxt.js with Typeform causes me to force reload page

I am making my own personal webdesign website but I can’t wrap my head around this problem.

How it happens: When I navigate from any page to my contact-page (where the Typeform is), the Typeform is simply not showing. When I reload the contact-page itself, it works as it is expected.

I am loading the Typeform script this way: contact.vue

head () {
        return {
            script: [
                { src: '' }

and I am embedding it in the template this way:

<div class="typeform-widget" data-url="https://url-to-my-form" 
                    data-transparency="50" data-hide-headers=true data-hide-footer=true
                    style="width: 100%; height: 500px;"></div>
                <div style="font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"></div>

I am following all the steps they provided, but it doesn’t seem to work… I am also getting the following errors in my console but I don’t think they are relevant because the form works when I reload the contact-page:

[Report Only] Refused to frame '' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".


note: I am developing on localhost so that’s why HTTPS is not enabled.

Thanks in advance! Aaron

Edit: the form when I reload the page

the form when I go to (for example) /home and then back to /contanct



I fixed the issue by using an NPM package provided by jgmullor, this resolved the issue!

User contributions licensed under: CC BY-SA
7 People found this is helpful