How do you embed an interactive demo in Nuxt?

Write a small component rendering an iframe with width 100%, an explicit aspect ratio, lazy loading and a descriptive title attribute. The iframe renders fine server-side; only code reading window to build the URL needs guarding.

How do I stop an embedded demo slowing my Vue app?

Start with loading="lazy". If you need more, use a click-to-load poster image that swaps to the iframe on click, which removes it from the initial load entirely at the cost of one interaction.

Can I animate an embedded demo in Vue?

Fade it if you like, but never animate its width or height. Resizing an iframe forces its content to relayout, so the captured page visibly reflows for no benefit.

← Back to blog

How to Add an Interactive Demo to Vue or Nuxt

August 19, 2026

Embedding a demo in Vue or Nuxt is an iframe in a template, and the useful work is wrapping it once so the whole site stays consistent.

Nuxt adds one wrinkle worth knowing about, which is server-side rendering.

A reusable component

Create a `ProductDemo.vue` taking the demo id as a prop, rendering an iframe with `width: 100%`, an explicit `aspect-ratio`, `border: 0`, `loading="lazy"` and a meaningful `title` attribute for assistive technology.

That last one is easy to skip and is the difference between a screen reader announcing "product demo: contract signing" and announcing nothing useful at all.

Server-side rendering in Nuxt

An iframe renders fine on the server -- it is inert markup and Nuxt will emit it without trouble.

What does not work on the server is anything reading `window` to build the URL. If you are appending personalisation parameters from client state, guard it or do it in `onMounted`, or the build will fail with a rendering error.

Deferring until it is needed

`loading="lazy"` is enough for most pages and costs one attribute.
A click-to-load poster -- a screenshot that swaps to the iframe on click -- removes the demo from initial load entirely, at the cost of one extra interaction.
`IntersectionObserver` if you want to load it just before it scrolls into view. Rarely necessary, but useful on a very long page with several demos.

Vue transitions and layout

Do not wrap the iframe in a transition that changes its size. Resizing an iframe forces its content to relayout, which on a demo means the whole captured page reflows -- visibly, and for no benefit.

Fade if you want an effect. Do not animate width or height.

Frequently asked questions

How do you embed an interactive demo in Nuxt?: Write a small component rendering an iframe with width 100%, an explicit aspect ratio, lazy loading and a descriptive title attribute. The iframe renders fine server-side; only code reading window to build the URL needs guarding.
How do I stop an embedded demo slowing my Vue app?: Start with loading="lazy". If you need more, use a click-to-load poster image that swaps to the iframe on click, which removes it from the initial load entirely at the cost of one interaction.
Can I animate an embedded demo in Vue?: Fade it if you like, but never animate its width or height. Resizing an iframe forces its content to relayout, so the captured page visibly reflows for no benefit.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →