{
  "doc": {
    "id": "app/component-testing/vue/overview",
    "title": "Vue Component Testing",
    "description": "Learn how to set up component tests in Vue and configure Cypress for Vue projects.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/vue/overview.md",
    "version": "ce02913654e2655ee63448bdc92bb92c7b46a619",
    "updated_at": "2026-04-22T19:37:51.587Z",
    "headings": [
      {
        "id": "app/component-testing/vue/overview#vue-component-testing",
        "text": "Vue Component Testing",
        "level": 1
      },
      {
        "id": "app/component-testing/vue/overview#what-youll-learn",
        "text": " What you'll learn",
        "level": 5
      },
      {
        "id": "app/component-testing/vue/overview#framework-support",
        "text": "Framework Support",
        "level": 2
      },
      {
        "id": "app/component-testing/vue/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/component-testing/vue/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/component-testing/vue/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/component-testing/vue/overview#vue-with-vite",
        "text": "Vue with Vite",
        "level": 3
      },
      {
        "id": "app/component-testing/vue/overview#vite-configuration",
        "text": "Vite Configuration",
        "level": 4
      },
      {
        "id": "app/component-testing/vue/overview#vue-vite-sample-apps",
        "text": "Vue Vite Sample Apps",
        "level": 4
      },
      {
        "id": "app/component-testing/vue/overview#vue-with-webpack",
        "text": "Vue with Webpack",
        "level": 3
      },
      {
        "id": "app/component-testing/vue/overview#webpack-configuration",
        "text": "Webpack Configuration",
        "level": 4
      },
      {
        "id": "app/component-testing/vue/overview#vue-webpack-sample-apps",
        "text": "Vue Webpack Sample Apps",
        "level": 4
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Vue Component Testing"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 5,
        "children": [
          {
            "type": "text",
            "value": " What you'll learn"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to set up component tests in Vue"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to configure Cypress for Vue projects"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Support"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing supports Vue 3+ with the following frameworks:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "#Vue-with-Vite",
                    "children": [
                      {
                        "type": "text",
                        "value": "Vue with Vite"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "#Vue-with-Webpack",
                    "children": [
                      {
                        "type": "text",
                        "value": "Vue with Webpack"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Tutorial"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Visit the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started Guide"
              }
            ]
          },
          {
            "type": "text",
            "value": " for a\nstep-by-step tutorial on adding component testing to any project and how to write your first tests."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Installation"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To get up and running with Cypress Component Testing in Vue, install Cypress\ninto your project:"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Open Cypress:"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The Cypress Launchpad will guide you through configuring your project."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For a step-by-step guide on how to create a component test, refer to the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For usage and examples, visit the\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/vue/examples.md",
            "children": [
              {
                "type": "text",
                "value": "Vue Examples"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Configuration"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works out of the box with\n"
          },
          {
            "type": "link",
            "title": null,
            "url": "https://vitejs.dev/",
            "children": [
              {
                "type": "text",
                "value": "Vite"
              }
            ]
          },
          {
            "type": "text",
            "value": ", and a custom "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://webpack.js.org/",
            "children": [
              {
                "type": "text",
                "value": "Webpack"
              }
            ]
          },
          {
            "type": "text",
            "value": "\nconfig. Cypress will automatically detect one of these frameworks during setup\nand configure them properly. The examples below are for reference purposes."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Vue with Vite"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works with Vue apps that use Vite 5+ as the bundler."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Vite Configuration"
          }
        ]
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "{\n  component: {\n    devServer: {\n      framework: 'vue',\n      bundler: 'vite',\n    },\n  },\n}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Vue Vite Sample Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-vite-ts",
                    "children": [
                      {
                        "type": "text",
                        "value": "Vue 3 Vite with TypeScript"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Vue with Webpack"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works with Vue apps that use Webpack 4+ as the\nbundler."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Webpack Configuration"
          }
        ]
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "import webpackConfig from './webpack.config'"
      },
      {
        "type": "code",
        "lang": "ts",
        "meta": null,
        "value": "{\n  component: {\n    devServer: {\n      framework: 'vue',\n      bundler: 'webpack',\n      // optionally pass in webpack config\n      webpackConfig,\n      webpackConfig: async () => {\n        // ... do things ...\n        const modifiedConfig = await injectCustomConfig(baseConfig)\n        return modifiedConfig\n      },\n    },\n  },\n}"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If you don't provide one, Cypress will try to infer your webpack config. If\nCypress cannot or you want to make modifications to your config, you can pass it\nin manually via the `webpackConfig` option."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Vue Webpack Sample Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts",
                    "children": [
                      {
                        "type": "text",
                        "value": "Vue 3 Webpack 5 with TypeScript"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 433
}