{
  "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": "48b03b5502f7aea1d0454750cce208f775403542",
    "updated_at": "2026-05-20T19:00:20.270Z",
    "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
      }
    ]
  },
  "chunks": [
    {
      "id": "app/component-testing/vue/overview#installation",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Installation",
      "heading_level": 2,
      "content_markdown": "## Installation\n\nTo get up and running with Cypress Component Testing in Vue, install Cypress into your project:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpm install cypress --save-dev\n```\n\n```\nyarn add cypress --dev\n```\n\n```\npnpm add --save-dev cypress\n```\n\nOpen Cypress:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\nChoose Component Testing\n\nThe Cypress Launchpad will guide you through configuring your project.\n\nFor a step-by-step guide on how to create a component test, refer to the [Getting Started](/llm/markdown/app/component-testing/get-started.md) guide.\n\nFor usage and examples, visit the [Vue Examples](/llm/markdown/app/component-testing/vue/examples.md) guide.\n",
      "section": "app",
      "anchors": [
        "installation"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 139
    },
    {
      "id": "app/component-testing/vue/overview#framework-configuration",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Framework Configuration",
      "heading_level": 2,
      "content_markdown": "## Framework Configuration\n\nCypress Component Testing works out of the box with [Vite](https://vitejs.dev/), and a custom [Webpack](https://webpack.js.org/) config. Cypress will automatically detect one of these frameworks during setup and configure them properly. The examples below are for reference purposes.\n\n### Vue with Vite\n\nCypress Component Testing works with Vue apps that use Vite 5+ as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n\n#### Vue Vite Sample Apps\n\n*   [Vue 3 Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-vite-ts)\n\n### Vue with Webpack\n\nCypress Component Testing works with Vue apps that use Webpack 5+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n\n#### Vue Webpack Sample Apps\n\n*   [Vue 3 Webpack 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)\n",
      "section": "app",
      "anchors": [
        "framework-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 377
    },
    {
      "id": "app/component-testing/vue/overview#vue-with-vite",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Vue with Vite",
      "heading_level": 3,
      "content_markdown": "### Vue with Vite\n\nCypress Component Testing works with Vue apps that use Vite 5+ as the bundler.\n\n#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n\n#### Vue Vite Sample Apps\n\n*   [Vue 3 Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-vite-ts)\n",
      "section": "app",
      "anchors": [
        "vue-with-vite"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 101
    },
    {
      "id": "app/component-testing/vue/overview#vite-configuration",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Vite Configuration",
      "heading_level": 4,
      "content_markdown": "#### Vite Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n\n```\nimport { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'vue',      bundler: 'vite',    },  },})\n```\n",
      "section": "app",
      "anchors": [
        "vite-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 63
    },
    {
      "id": "app/component-testing/vue/overview#vue-with-webpack",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Vue with Webpack",
      "heading_level": 3,
      "content_markdown": "### Vue with Webpack\n\nCypress Component Testing works with Vue apps that use Webpack 5+ as the bundler.\n\n#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n\n#### Vue Webpack Sample Apps\n\n*   [Vue 3 Webpack 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)\n",
      "section": "app",
      "anchors": [
        "vue-with-webpack"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 224
    },
    {
      "id": "app/component-testing/vue/overview#webpack-configuration",
      "doc_id": "app/component-testing/vue/overview",
      "heading": "Webpack Configuration",
      "heading_level": 4,
      "content_markdown": "#### Webpack Configuration\n\n*   cypress.config.js\n*   cypress.config.ts\n\n```\nconst { 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      },    },  },})\n```\n\n```\nimport { 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      },    },  },})\n```\n\nIf 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.\n",
      "section": "app",
      "anchors": [
        "webpack-configuration"
      ],
      "path": "/llm/json/chunked/app/component-testing/vue/overview.json",
      "token_estimate": 184
    }
  ]
}