vue template: update to latest @vue/cli #19
Conversation
| "@vue/cli-plugin-babel": "^4.4.0", | ||
| "@vue/cli-plugin-eslint": "^4.4.0", | ||
| "@vue/cli-service": "^4.4.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "eslint": "^6.7.2", | ||
| "eslint-plugin-vue": "^6.2.2", | ||
| "vue-template-compiler": "^2.6.11" | ||
| "core-js": "^3.32.2", | ||
| "@vue/cli-plugin-babel": "^5.0.8", | ||
| "@vue/cli-service": "^5.0.8" |
There was a problem hiding this comment.
I like that the dependencies get quite simpler.
Note that the project generated by @vue/cli@5 put core-js in the dependencies, and I moved it to devDependencies because as far as I am aware it is only used by the Babel config used by @vue/cli-plugin-babel to inject ECMAScript polyfills at build time. We don't want to download it as a dependency when running in EngineBlock.
| For a guide and recipes on how to configure / customize this project,<br> | ||
| check out the | ||
| For a guide and recipes on how to configure / customize this project, check out the |
There was a problem hiding this comment.
Forced line break looks strange in narrow windows (such as in the editor's preview pane).
| const { createApp } = require('vue'); | ||
| import { createApp } from 'vue'; | ||
| import App from './App.vue'; |
There was a problem hiding this comment.
Didn't even notice that we had mixed imports/requires.
| width="200" | ||
| height="200" |
There was a problem hiding this comment.
Longstanding issue with our Vue starter template: logo looks too big. Because:
- In the original project generated by
@vue/cli, there is asrc/assets/logo.pngfile. Because storing binary files in StackBlitz is a paid feature, we modified that to link to https://vuejs.org/images/logo.png - The
src/assets/logo.pngfile was 200x200, but the image we link to is 400x400, and ends up looking way too big in the preview iframe in our classic editor.
Other options that don't require hotlinking to the vuejs.org site:
- Include a SVG logo as
src/assets/logo.svg. Problem: EngineBlock doesn't seem to support it, at least not in thevue-clipreset. - Include the logo as inline SVG in the template. That one is doable, and the Vue logo can be tiny as SVG:
<svg viewBox="0 0 16 16" width="200" height="200">
<path d="M9.85 1.07L8 4.27l-1.85-3.2H0l8 13.86 8-13.86H9.85z" fill="#41B883"/>
<path d="M9.85 1.07L8 4.27l-1.85-3.2H3.2L8 9.4l4.8-8.32H9.85z" fill="#34495E"/>
</svg>For now I'm keeping the hotlinked PNG, but if we want to go with inline SVG (maybe even as a VueLogo.vue component that takes a size prop?) that works too.
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.