Nuxt 3 installation guide

[madsh93]

Hi

I'm looking for a guide to setup Cypress with Nuxt 3. Following the current guide I get stuck at passing vite.config.js since its not available in Nuxt 3 (i assume):

const path = require("path")
const { startDevServer } = require("@cypress/vite-dev-server")

module.exports = (on, config) => {
  on("dev-server:start", (options) => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(__dirname, "..", "..", "vite.config.js")
      }
    })
  })

  return config
}

[beyer-johannes]

I stuck at the same point and can not use cypress with nuxt3. Any help whould be nice!

[JasonLandbridge]

Someone posted a working guide here as well for using component testing: nuxt/nuxt#19304

[jemrickrioux]

Would love to try that out with nuxt 3 app.

[gusstavotelles]

man, I just followed the documentation and applied it to my nuxt 3 project (https://docs.cypress.io/guides/end-to-end-testing/) and managed to run almost all features! I recommend

[jclaessens97]

Also missing setup for Nuxt 3. I think if you can point cypress to the vite.config.ts that Nuxt 3 is using, it can work out of the box?
Not sure where to find such config (if it's even possible at all), because Nuxt 3 seems to be using a vite-builder package under the hood...

[kstraszewski]

I've found out that cypress 10 have breaking change in case of loading plugins:
https://docs.cypress.io/guides/references/migration-guide#devServer

And also that this build works for 2 types of configs:
https://github.com/cypress-io/cypress/blob/develop/cli/types/cypress.d.ts#L3045

In my opinion cypress needs to add nuxt prop to cypress 10 config as an vite option

[ktavean]

I got it working by setting the framework to vue, bundler to vite, inside the cypress.config.ts file. Next, I created a vite.config.js file, which contains the boilerplate vite.config.js template.

It's more of an adhesive tape fix, but it worked for mounting a component. Haven't checked other tests, yet.

[CodyBontecou]

I wrote a quick blog post on how to set up Cypress with Nuxt 3. Here's the repo for reference.

I didn't experience anything out of the ordinary. Are you trying to set up E2E testing or Component testing?

[ktavean]

I believe the topic was opened when Nuxt 3 was still at RC stage. A stable version has since been released and AFAIK it works properly with Cypress now. It was Component Testing I needed.

[CodyBontecou]

Ahh gotcha.

[smfelsher]

I am also interested in a Cypress configuration that will work for Component Testing in a Nuxt 3 project.

According to Cypress Component Testing documentation, only Nuxt 2 is supported and marked Alpha.

The Nuxt specific Component Testing section in the Cypress docs says that Nuxt 3 is not yet supported.

I subscribed to this issue hoping someone was going to post the magic Cypress configuration that would allow Component Testing to work with Nuxt 3. My guess is it's some combination of telling Cypress it's a Vue 3 project and then somehow dumping the Vite configuration from Nuxt. I started down that path, but other work got in the way! 😄

[JasonLandbridge]

Someone posted a working guide here as well for using component testing: nuxt/nuxt#19304

[elwinvaneede]

Update: In hindsight my example doesn't load Nuxt at all, so any auto-imports you rely on won't work. I recommend looking at this example: nuxt/nuxt#19304.

---

I've got a workaround by adding a vite.config.cypress.component.js file with the same Vue options as you've used in the Nuxt config file:

import vue from '@vitejs/plugin-vue'

// Workaround to get Cypress Component Testing working with Nuxt 3
export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),
  ],
}

And then importing it in the cypress.config.ts / cypress.config.js file and setting as the viteConfig:

import { defineConfig } from 'cypress'
import viteConfig from '~/vite.config.cypress.component.js'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite',
      viteConfig,
    },
  },
})

I haven't run into issues with this just yet (but this is with a CSR only project).

[JasonLandbridge]

Thanks! Just to add:

If anyone runs into the error:

ERR_ABORTED 504 (Outdated Optimize Dep)

Make sure to add the following to vite.config.cypress.component.js

export default {
	// Add OptimizeDeps.disabled: true
	optimizeDeps: {
		disabled: true,
	},
	// Same as above
	plugins:[]
};

Cypress runs a new instance of Vite and it tries to retrieve a component from the Vite cache when running Component testing. So this fixed it for me at least.

[elwinvaneede]

In hindsight my example doesn't load Nuxt at all, so any auto-imports you rely on won't work. I recommend looking at this example: nuxt/nuxt#19304.

[JasonLandbridge]

Someone posted a working guide here as well for using component testing: nuxt/nuxt#19304

[awacode21]

Honestly Vue 3 and also Nuxt 3 are out there for quite a while now.
Also Vue 2 has reached EOL and is no longer actively maintained.

But Cypress still only only supports Vue 2 / nuxt 2.

When can we expect the update in support here?