Does webflow interactions work if exported to a vue project

Good day,
i have been searching the entire web for weeks looking for a solution to this : if i export webflow code and make a vue component out of a div from the exported html that has an interaction attached to it, the interaction doesn’t work. even if it looks exactly the same when you look at it with chrome inspect, it just doesn’t work. so my question is, is it even possible to export webflow code and use it in a vue project with interactions working? and if it is, HOW???


Here is my public share link: LINK
(how to access public share link)

You can, but you have to restart Webflow interactions system after Vue has parsed your components. Webflow.require(‘ix2’).init(); something like that after Vue has loaded will restart webflow interactions and will make them work

what is “Webflow” in the statement Webflow.require(‘ix2’).init() ? is it a package i must install with npm install Webflow ?

No, it’s an Api that Webflow exposes in his script, it’s already in your theme. You can call it with window.Webflow

1 Like

That actually worked. thanks. for people wandering how to get it working with vue. you gotta put this in the mounted life cycle hook like so :
mounted() {
window.Webflow.require(“ix2”).init();
}

and if you use Lottie animations, you have also to add window.Webflow.require(‘lottie’).init();

@Allen_Bowers
Hello there

Can you please help me by saying where did you put the code?
mounted() {
window.Webflow.require(“ix2”).init();
}

I did it inside a vue page inside Nuxt JS Project &

it’s not working by Nuxt internal linking
It’s working only, When I am clicking Refresh

Thanks in advanced

For me using Nuxt.js and calling init via mounted lifecycle did just work partwise. There seems to be an issue with the interaction targets somewhat.

I’d really appreciate if you guys might launch a guide how to make this work. So far everything works like a charm with the plain html/css