Can a Vue.js application be inserted within the custom code block on a Webflow page? Has anyone successfully done this yet?
- Add the Vue.js CDN in Project Settings under Head Code.
- Use an Embed component in Webflow to insert a div with a unique ID for the Vue app.
- Add the Vue initialization script in the Footer Code section to mount the app.
- Ensure your Vue code is simple, avoids SPA routing, and recognizes Webflow’s limitations.
Yes, a Vue.js application can be embedded into a custom code block on a Webflow page, although there are some limitations and caveats due to Webflow’s environment. Several developers have implemented this successfully by following specific steps.
1. Load Vue.js via CDN in the Page Settings
To use Vue.js, you must first load the framework into your page.
- Go to Project Settings > Custom Code > Head Code section.
- Add a Vue.js CDN script. For example:
<script src="https://unpkg.com/vue@3"></script> - Alternatively, use an older version with Vue 2 if needed:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2. Add a Custom HTML Embed on the Page
You’ll need to manually include an HTML embed using the Webflow Designer.
- Drag an Embed component (from the Components panel) into your page where you want the app.
- Inside the embed, insert a container element with a unique ID, e.g.:
<div id="app">{{ message }}</div>
3. Add the Vue Script in the Footer
To initialize your Vue app, add the script after the element is loaded.
Go to Page Settings > Custom Code > Footer Code section.
Add your Vue initialization script, for example:
```
```
4. Understand the Constraints
There are a few things to be careful of:
- Webflow’s Designer doesn't support dynamic JS previews, so you must publish to see the Vue app work.
- Mount your app to an isolated ID to avoid conflicts with Webflow’s DOM structures.
- Avoid relying on Webflow’s native interactions with Vue DOM elements unless separated clearly.
- Vue Router or advanced Single Page Application (SPA) logic may not work well inside a Webflow-hosted static structure.
5. Real-World Usage
Yes — people have successfully embedded Vue mini-apps in Webflow, especially for:
- Interactive widgets or calculators.
- Conditional UI elements.
- Lightweight content inside modals or sections.
You can find examples in community forums like Webflow's and on GitHub, where developers create Vue components and embed them similarly.
Summary
You can run a Vue.js app inside a Webflow page using the Embed block and Custom Code in Page Settings, as long as it's a simple instance and doesn’t require full SPA routing. For more complex functions, integrate Vue within isolated sections or consider exporting Webflow code and enhancing it externally.