Vue.js stops tabs interactions


i just integrated Vue.js lib into my website and it stops tabs menu working (when i clicked on tab button nothing happens).

Any idea to workaround/fix it ?


Most likely playing with z index for the tabs will solve it.

You can share your public link so it’ll be easier to have a closer look.

Hi, i posted the solution here as it may help,

Interactions seems broken using Vue.js (and I’ve found similar issue using angular). Re-init WF when document is loaded works . Here is the code to add on vue.js lifecycle hooks “mounted” :

mounted () {
this.$nextTick(function () {
//RE-INIT WF as Vue.js init breaks WF interactions
1 Like

Just what I needed, thanks @sebT !

My form submissions weren’t working but your code seems to have fixed it.

Hi Sebastien,

What is the correct library/file to import into the vue.js app?
As, I am building the prod assets first and then linking into the webflow.

However it is currently breaking the interaction panel.

@sebT seb
Hello there

Can you please help me by saying where did you put the code?

I did it inside a vue page & it’s not working actually by Nuxt internal linking
It’s working only, When I am clicking Refresh

Thanks in advanced

I can make Webflow site work by adding Slider, Tabs, and other Webflow related components in <ClientOnly></ClientOnly> tag. For anything related to Webflow Class, like w-tabs, w-slider, w-nav.