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: 'https://embed.typeform.com/embed.js' }
            ]
        }
    }

JavaScript
​x
 
head () {
        return {
            script: [
                { src: 'https://embed.typeform.com/embed.js' }
            ]
        }
    }
​

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>

JavaScript
 
<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 'https://aaron479753.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".


GET https://cdn.segment.com/analytics.js/v1/9at6spGDYXelHDdz4r0cP73b3wV1f0ri/analytics.min.js net::ERR_BLOCKED_BY_CLIENT

JavaScript
 
[Report Only] Refused to frame 'https://aaron479753.typeform.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https:".
​
​
GET https://cdn.segment.com/analytics.js/v1/9at6spGDYXelHDdz4r0cP73b3wV1f0ri/analytics.min.js net::ERR_BLOCKED_BY_CLIENT
​

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

Answer

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

https://www.npmjs.com/package/nuxt-typeform

Advertisement

Answer