This updates the vue template (EngineBlock) to use the latest @vue/cli (v5, instead of v4).
Goals and technical choices
My goal was to make sure that a downloaded project could install and run with Node and npm with no friction. In my tests, the current template worked, but logged incompatible runtime warnings with Node 18 (some dependency was marked as compatible with Node up to 16; Node 16 is end-of-life as of this week).
Note that Vue CLI, which wraps webpack, is in maintenance mode. The Vue project currently recommends using Vite instead. But the coding conventions for the project's index.html used by Vite are not compatible with EngineBlock at this time (see #18 for a similar issue with our React templates), so for now we should keep using @vue/cli in the template's devDependencies.
Methodology for this update
I created a new @vue/cli project with:
npx @vue/cli create hello-world
In the project creation wizard, I chose a custom config, and disabled ESLint (by default the two enabled plugins are babel and eslint).
My rationale for this was: we don't run linting on EngineBlock or in the StackBlitz classic editor, and we'd like to keep the dependencies down to a minimum. Do push back if you think we do need eslint.
Then I copied from the generated files into the vue template, trying to respect the modifications we had done before.
This updates the
vuetemplate (EngineBlock) to use the latest@vue/cli(v5, instead of v4).Goals and technical choices
My goal was to make sure that a downloaded project could install and run with Node and npm with no friction. In my tests, the current template worked, but logged incompatible runtime warnings with Node 18 (some dependency was marked as compatible with Node up to 16; Node 16 is end-of-life as of this week).
Note that Vue CLI, which wraps webpack, is in maintenance mode. The Vue project currently recommends using Vite instead. But the coding conventions for the project's
index.htmlused by Vite are not compatible with EngineBlock at this time (see #18 for a similar issue with our React templates), so for now we should keep using@vue/cliin the template'sdevDependencies.Methodology for this update
I created a new
@vue/cliproject with:In the project creation wizard, I chose a custom config, and disabled ESLint (by default the two enabled plugins are
babelandeslint).My rationale for this was: we don't run linting on EngineBlock or in the StackBlitz classic editor, and we'd like to keep the dependencies down to a minimum. Do push back if you think we do need
eslint.Then I copied from the generated files into the
vuetemplate, trying to respect the modifications we had done before.