Skip to content
Start free
Preview and AI

Live preview, code and your AI for Nuxt sites

Open your Nuxt or Vue repo in Xodia and it runs on a live preview at every screen size. Edit the code in the browser, or ask your own AI, which follows Xodia's Nuxt and Vue skills. Clicking to edit .vue files isn't available yet, so changes go through the code or your AI.

Start freeEvery framework

Free plan. 14-day Pro trial. No charge unless you choose a plan.

Settings, General: Xodia detected a Nuxt 4 site with TypeScript, plain CSS, pnpm, content in files in the repo and Netlify, and marks it Preview and agent: live preview, your agent and the code editor, with click to edit to come for this framework.

What works today

Your Nuxt site, running as it does on your machine

Xodia runs nuxt dev in a private preview, so you see every change as soon as it's saved, on the canvas's phone, tablet and desktop sizes.

  • The live preview at six breakpoints, with screenshots your AI can take to check its work
  • The Code tab, to read and edit any file in the browser
  • Your AI on the site over MCP, with skills for page meta, the app folder and public files
  • Markdown in a content folder, and Sanity documents, edited in the Content tab
  • Saves as commits, branches, pull requests and publishing, as on every stack

The Code tab on a Nuxt site: the file tree with app/pages/index.vue open, its useSeoMeta title and description, and the hero template, in plain text, ready to edit by hand.

Editing level

What you change, and how

Nuxt and Vue sites get the Preview and AI level. Here is what that means in practice.

  • In Xodia

    The preview, the Code tab, the Content tab for files and Sanity, saving, branches and publishing.

  • Through your AI

    Layout, styles, new pages and components. Describe the change in the ask box under the preview, and your AI edits the .vue files and checks the result.

  • Not yet

    Clicking to edit, editing text in place and the Style panel aren't available on .vue files yet.

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

  • Supported versions

    Nuxt 4 and Nuxt 3, and Vue 3 sites built with Vite.

  • Nuxt and Vue skills

    Agent and code only: page meta with useSeoMeta and useHead, the app folder and public files. Click editing isn't available on these sites yet.

    Written for: Nuxt 4 (current, 4.6) and Nuxt 3 (end of life 2026-07-31, kept as is), and Vue 3 sites on Vite. Click editing isn't available on .vue files.

Typical setup

From your repo to your first edit

Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.

  1. Install Xodia's GitHub App on the repo and import it, or open the folder on your computer
  2. Add any environment variables the preview needs in Xodia
  3. Xodia runs nuxt dev, or Vite for a Vue site, and opens the preview
  4. Ask your AI for a change or edit the code, then save to a branch; your host deploys it as it does today

The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.

Works with

Your content and your host, as they are

Xodia detects where the content lives and where the site is hosted, and keeps both.

  • Headless CMS

    Starter and up

    Sanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.

  • Content in the repo

    Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.

  • Hosts

    Starter and up

    Vercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.

Questions

Nuxt and Vue questions

Can I click to edit a Nuxt page?

Not yet. The preview, the Code tab and your AI work today; clicking to edit, inline text and the Style panel aren't available on .vue files yet.

Do I need to change my nuxt.config?

No. Xodia runs your own dev server as it is, and your saves contain only your own changes.

Can I edit content without code?

Yes, when it lives in Markdown files in a content folder or in Sanity: the Content tab shows it as forms, on Starter, Pro and Agency. Content from other CMSs goes through your AI.

What does it cost?

Nuxt and Vue sites work on every plan, the free one too. See pricing for the limits of each.

Keep exploring

Other stacks

Preview your Nuxt site and let your AI do the edits.

Start freeSee pricing

May we use Google Analytics to see how people find and use this site? It sets cookies only if you allow it. Cookie policy