{
  "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": "fbc9225067c51c52ee13224e3b702cf8a025ec12",
    "updated_at": "2026-08-14T12:36:26.878Z",
    "headings": [
      {
        "id": "app/component-testing/vue/overview#vue-component-testing",
        "text": "Vue Component Testing",
        "level": 1
      },
      {
        "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
      },
      {
        "id": "app/component-testing/vue/overview#using-cypress-with-nuxt",
        "text": "Using Cypress with Nuxt",
        "level": 2
      },
      {
        "id": "app/component-testing/vue/overview#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Vue Component Testing"
          }
        ]
      },
      {
        "type": "paragraph",
        "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 "
          },
          {
            "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 step-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 into your project:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "npm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Yarn"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "pnpm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Bun"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "npm install cypress --save-dev"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "yarn add cypress --dev"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "pnpm add --save-dev cypress"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "bun add --dev cypress"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Open Cypress:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "npm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Yarn"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "pnpm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Bun"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "npx cypress open"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "yarn cypress open"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "pnpm cypress open"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "bunx cypress open"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Choose Component Testing"
          }
        ]
      },
      {
        "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 "
          },
          {
            "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 "
          },
          {
            "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 "
          },
          {
            "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": " config. Cypress will automatically detect one of these frameworks during setup and configure them properly."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For a full explanation of how the dev server and bundler work — including automatic config detection and override options — see "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/component-framework-configuration.md#Dev-Server-and-Bundler",
            "children": [
              {
                "type": "text",
                "value": "Component Testing Configuration — Dev Server and Bundler"
              }
            ]
          },
          {
            "type": "text",
            "value": "."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The examples below are for quick reference."
          }
        ]
      },
      {
        "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": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.js"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.ts"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "const { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})"
      },
      {
        "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 5+ as the bundler."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Webpack Configuration"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.js"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.ts"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "const { defineConfig } = require('cypress')const webpackConfig = require('./webpack.config')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'webpack',      // optionally pass in webpack config      webpackConfig,      webpackConfig: async () => {        // ... do things ...        const modifiedConfig = await injectCustomConfig(baseConfig)        return modifiedConfig      },    },  },})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { defineConfig } from 'cypress'import webpackConfig from './webpack.config'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'webpack',      // optionally pass in webpack config      webpackConfig,      webpackConfig: async () => {        // ... do things ...        const modifiedConfig = await injectCustomConfig(baseConfig)        return modifiedConfig      },    },  },})"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "If you don't provide one, Cypress will try to infer your webpack config. If Cypress cannot or you want to make modifications to your config, you can pass it in 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"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Using Cypress with Nuxt"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress does not ship a dedicated "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://nuxt.com/",
            "children": [
              {
                "type": "text",
                "value": "Nuxt"
              }
            ]
          },
          {
            "type": "text",
            "value": " framework definition, and it does not read `nuxt.config`. Instead, you component test a Nuxt 3+ app the same way you test any Vue 3 + Vite project, by setting the `vue` framework and the `vite` bundler:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.js"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.ts"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "const { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Because Cypress does not execute `nuxt.config`, the bundler behavior Nuxt normally provides is not applied for you. Account for the following in the config you pass to Cypress:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Path aliases — Nuxt's `~` and `@` aliases are not visible to Cypress. Declare the ones your components use via `viteConfig`. See "
                  },
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/app/component-testing/component-framework-configuration.md#Meta-frameworks-that-own-the-bundler-config",
                    "children": [
                      {
                        "type": "text",
                        "value": "Meta-frameworks that own the bundler config"
                      }
                    ]
                  },
                  {
                    "type": "text",
                    "value": "."
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "Auto-imports — Nuxt auto-imports components and composables (such as `ref`, `useRoute`, and `useRuntimeConfig`). These are not available when a component is mounted in isolation, so either import what your component relies on explicitly or add the equivalent Vite plugin to your `viteConfig`."
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "See also"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "/llm/markdown/app/tooling/code-coverage.md#component-testing-code-coverage",
                    "children": [
                      {
                        "type": "text",
                        "value": "Component Testing code coverage"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 936
}