---
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: docs/app/component-testing/vue/overview.mdx
version: ce02913654e2655ee63448bdc92bb92c7b46a619
updated_at: '2026-04-22T19:37:51.587Z'
---
# Vue Component Testing

#####  What you'll learn

- How to set up component tests in Vue
- How to configure Cypress for Vue projects

## Framework Support

Cypress Component Testing supports Vue 3+ with the following frameworks:

- [Vue with Vite](#Vue-with-Vite)
- [Vue with Webpack](#Vue-with-Webpack)

## Tutorial

Visit the
[Getting Started Guide](/llm/markdown/app/component-testing/get-started.md) for a
step-by-step tutorial on adding component testing to any project and how to write your first tests.

## Installation

To get up and running with Cypress Component Testing in Vue, install Cypress
into your project:

Open Cypress:

The Cypress Launchpad will guide you through configuring your project.

For 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.

For usage and examples, visit the
[Vue Examples](/llm/markdown/app/component-testing/vue/examples.md) guide.

## Framework Configuration

Cypress 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.

### Vue with Vite

Cypress Component Testing works with Vue apps that use Vite 5+ as the bundler.

#### Vite Configuration

```ts
{
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
    },
  },
}
```

#### Vue Vite Sample Apps

- [Vue 3 Vite with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-vite-ts)

### Vue with Webpack

Cypress Component Testing works with Vue apps that use Webpack 4+ as the
bundler.

#### Webpack Configuration

```ts
import webpackConfig from './webpack.config'
```

```ts
{
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      // optionally pass in webpack config
      webpackConfig,
      webpackConfig: async () => {
        // ... do things ...
        const modifiedConfig = await injectCustomConfig(baseConfig)
        return modifiedConfig
      },
    },
  },
}
```

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.

#### Vue Webpack Sample Apps

- [Vue 3 Webpack 5 with TypeScript](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue3-webpack-ts)