Migration to vue-cli 3 now?

Love the new linting options etc. How do I get these on my vue-cli 2 app?

I want all these:

Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (Y/n) 

Thanks.

There’s no easy migration path expect this:

  1. create a new project
  2. copy over /src
  3. copy over your tests.
  4. copy the content of /static to /public, maybe fix broken links in the app as you run it
  5. if you did any adjustments in your old index.html, manually add them to the new index.html already present in /public
  6. use vue.config.js to adjust webpack settings if you added something to your old project’S default settings
5 Likes

Thanks. Will have a play. I did get through this earlier this afternoon and enjoyed npm run lint --fix, but have been trying to get that on my existing setup.

Is vue cli 3 just about done now or is it worth waiting?

we’re pretty much just switching to vue-loader 15 and webpack 4 under the hood, but the good thing about the new cli is: those changes will get into your project by simply updating your dependencies.

So It’s ready to use I would say.

But, necessary disclaimer: if you plan on migrating a mission-critical app that’s already in production to it, remember: it’s not out of beta yet

1 Like

@LinusBorg In your step #6 you have a link to adjust webpack settings.

The link is now dead. Do you have a description of what needs to be done here? I have done all of the previous steps but I’m still seeing what I believe to be a webpack related bug in dev tools “Waiting for update signal from WDS” whenever I try to run the project and it never loads.

I also do not see the vue.config.js file added automagically by CLI 3 so I added this myself, but I would love to know what webpack settings you’re referencing in that dead link.

Thanks in advance

I didn’t link to any specific webpack settings, I linked to the docs (at that time) explaining how to adjust the default webpack settings that Vue CLI 3 come with. The point was hat you might have to configure any webpack loaders or plugins that you had added to your old config this way.

This doc can now be found here:

https://cli.vuejs.org/guide/webpack.html

As to the error, that sounds related to the Hort Module Reloading from webpack’s dev server, but I have no tangible idea what could cause it in a default setup, so you would have to provide more context and details

1 Like