Vue SFC projects not working in v0

Current versus Expected behavior

Current behavior: When creating any chat in v0, if I request Vue.js code, the tool generates code containing <template>, <script>, and <style> blocks. However, after generation completes, the right panel displays only the <script> block, with <template> and <style> blocks removed. This happens regardless of how I phrase the request, even when explicitly asking to include <template> and <style>.

Expected behavior: The right panel should display the complete code, including <template>, <script>, and <style> blocks, as initially generated, without removing any sections.


Code, configuration, and steps that reproduce this issue

Steps to reproduce:

  1. Open v0 and start a new chat.
  2. Submit a prompt, e.g., “Create a Vue.js component with template, script, and style for a button.”
  3. v0 generates code that initially includes <template>, <script>, and <style> blocks.
  4. After generation completes, the right panel shows only the <script> block, with <template> and <style> missing.

Example prompt:

Create a Vue.js component with `<template>`, `<script>`, and `<style>`. The template should include a button, the script should handle a click event, and the style should define button styles.

Generated output (in right panel):

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

(The expected <template> and <style> blocks are missing.)

Configuration:

  • Issue occurs in the right panel of the v0 interface.
  • Tested with various prompts, including explicit requests to retain all blocks—same result.
  • Issue is consistent across all chats.

Project information (URL, framework, environment, project settings)

  • Platform: v0 (web version, exact version unknown).
  • Framework: Requests involve Vue.js.
  • Environment: v0 web interface, browser (e.g., Chrome, latest version).
  • Project settings: Issue is not project-specific; it occurs in every new chat.
  • Additional info: I suspect the issue might be tied to my account, as it consistently occurs in my interface.

Please help identify why <template> and <style> are being removed and how to fix this!

v0 currently doesn’t support Vue SFC for multi-file projects with a file tree, so this is a TODO for us but no current timeline for support

These should work in single file projects though, so you may still be able to use v0 for one-off components, just not for full projects that require routing

2 Likes

Thanks for the reply, but everything used to work before — I had code from more than 20 files, each with about 2,000 lines, and it handled everything perfectly. Now I’m giving it just 4 files with around 1,300 lines each, and it can’t process them?

My friend processed these same files from his account, and everything worked perfectly for him. Are you sure the issue isn’t with my account?