If it's for prod, skip Vite for now.

I would stick with Vue CLI

I'm asking about Vuetify for Vue 3 because they just did an update today

If I were you I would use Vuetify if possible, but if you wanna roll your own components, Vue 3 will be just fine

OK here's the latest from John + the Vuetify team... released today at VueTO https://docs.google.com/presentation/d/1jqRJUPT63SopX8vJHXIidmpULrI-kA-ojZ0NELhJCDM/edit#slide=id.g9f2ce2f07f_0_129

I really appreciate it. Maybe I should just get over wanting to use the latest and greatest, having played with Vue 3 earlier. I think I'm partly trying to avoid a fight of upgrading, as organizationally I get the feeling it'll be a solid lock-in.

Though they also really like typescript as an org too, so there's that.

Yeah I mean... Vue 2 and typescript is a nonstarter

I would maybe try a css framework like tailwind

and roll your own component logic

Vuetify release date is summer 2021

I've been building in Vue 3 for quite a while now

and taught a testing workshop on it yesterday

Hey! Has anyone had issues with combining Cypress v5.x with Vue-CLI 3.x?

Opening Cypress...
 ERROR  TypeError: envValue.match is not a function
TypeError: envValue.match is not a function

This is what I get. For some reason, when starting cypress (

npx cypress open

) it seems to still use Vue-CLI code.

Additionally trying to run

npx vue-cli-service test:e2e --mode test

always runs Cypress v3.8... 😦

👋

@User we're waiting on Soda to do a major release...

you have to manually update the cypress version number.

I'll look into the stack trace now

Here's the open issue about Cypress 3.8 https://github.com/vuejs/vue-cli/issues/5703#issuecomment-668073623 on 4.x

@User I'm hesitating to put this on the issue, as Bart is working on a PR right now (and possibly even a fork)... but here's a response and simple fix:

The root cause of the issue is that the Vue CLI plugin packages the Cypress 3.8.3 binary inside of its node_modules (

node_modules/@vue/cli-plugin-e2e-cypress/node_modules/.bin/cypress

) and then calls

require.resolve

to find the binary. Installing Cypress as a devDependency will create and link

node_modules/.bin/cypress

, but Vue CLI doesn't find it. We're brewing a PR to solve this, but in the meantime if you don't want to wait I have a workaround:

@vue/cli-plugin-e2e-cypress

is basically the same thing as the [start-server-and-test](https://www.npmjs.com/package/start-server-and-test) package. The only difference is that the API is nicer and it registers itself in the Vue CLI UI. The start-server-and-test package is maintained by one of our core developers and Cypress itself uses it throughout our own internal testing ecosystem. To achieve feature parity w/ the existing Vue CLI behavior you can switch to using start-server-and-test and referencing the cypress executable in your package.json. 1. Remove the Vue CLI e2e plugin 2. Replace it with [start-server-and-test](https://www.npmjs.com/package/start-server-and-test) and a direct Cypress devDependency, where you call

npm run serve

and then your cypress test command of choice. For CI (headless mode) this is usually

cypress run

, for local development this is usually

cypress open

After doing this, your package.json should look something like:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "test:e2e": "start-server-and-test 'yarn serve' :8080 'cypress open'",
    "test:e2e:ci": "start-server-and-test 'yarn serve --mode=production' :8080 'cypress run'"
  },
  "devDependencies": {
    "cypress": "^5.6.0",
    "start-server-and-test": "^1.11.5"
  }
}

Obviously this isn't as terse as dispatching it to vue-cli-service, but this is how we do it internally at Cypress.

About your stack trace: It might be an issue if you're using the junit reporter? A fresh Vue CLI 3 install and cypress 5.x does not have this issue

I did see a reference to

envValue

in the

mocha-junit-reporter

, but I did not see

envValue.match

anywhere -- perhaps there is a mismatched dependency

Hey @User! Thank you! We ended up with that very approach (using Cypress directly and starting the frontend app separately). The issue was that we also used

env-smart

with

.env.types

file, which still caused an error when starting Cypress, even though we were not trying to use the vue-cli. For example a direct

cypress open

call would still use the vue-cli-service. Super weird. Maybe it was some kind of webpack loader thing? Really hard to say... Anyway, we fixed that by removing

env-smart

from Cypress plugins index and instead just used

dotenv

to load the ENV variables.

Interesting... We don't resolve anything in a smart way -- the user webpack config passed in is the one we listen to.

I've never used env-smart though, so I can't say for certain what's wrong.

Shoutout to the team behind Cypress and all the amazing work you're doing. I'm kinda new to testing and my company has generally never tested the frontend, but I've taken on the challenge to change that. After spending the last week watching youtube talks from Jess and Gleb and reading docs, I've written my first couple of tests and it's now part of CI (with all that fancy caching too!). I'm already so much more confident in our code lol. Thank you all for being awesome. And btw the component testing is working great - love that addition as Cypress is now the only testing tool we use

Ahhhhhh I love it. Thanks for the praise ❤️

@User would you be interested in doing user testing with us to help us improve e2e + component testing?