Extract & export

Export to Vue

Export any website section as a Vue Single File Component with scoped styles, built only from the author's CSS: breakpoints, hover states and variables kept.

Updated October 20, 2026

The Vue export gives you a section of any site as a Vue Single File Component: template and styles in one .vue file, with the CSS in a <style scoped> block so it only applies to that component.

How to export a section to Vue

Open the inspector with Alt+I and click the section or component you want.
Choose Vue in the export window.
Check the isolated preview at 375, 768, 1024 and 1280 px, or in one of the 27 device frames.
Copy the code or download the file and add it to your Vue project.

What’s in the component

Part	Content
Template	The section’s markup
Styles	A `<style scoped>` block with the author’s rules for that section

The styles come from the site’s original stylesheets, not from computed values, so the component keeps:

every @media, @supports and @container rule;
:hover, :focus, :focus-visible, :focus-within and :active, also when the state is on an ancestor (for example .card:hover .title);
::before and ::after, and nested CSS;
var() resolved to the site’s value, and absolute URLs.

Because the styles are scoped, the exported rules don’t leak into the rest of your app, and universal resets from the original site are left out anyway. For the full list of what’s kept and why, see Export to HTML + CSS.

Free and Pro

Limits

See the feature pageWebsite to code

Still stuck?Contact us