The Vue CLI team recently updated its command line tool for Vue.js development to version 4. The release will help developers automate the migration process, use additional package managers and remove extraneous whitespace for more efficient DOM structures.
In version 3 of the Vue CLI, the command ‘vue build’ did not create a manifest.json file based on the configuration in vue.config.js. With the new pwa.manifestOptions field, manifest.json gets generated from the configuration object rather than directly copied from a project’s public folder. This build configuration change provides a more consistent interface for managing Vue PWA configurations.
Previously, running Vue build and production commands would produce a different layout for the Vue dist folder. With version 4 of the Vue CLI, the directory structure across all build and development modes remains consistent.
In Vue CLI version 4, developers can specify a custom node package manager by adding --packageManager [packagename] option in the vue create command.
When migrating from version 3 to version 4 of the Vue CLI, developers should execute the vue upgrade command. In version 3, the command would only install the latest version of Vue CLI plugins. For version 4, the Vue CLI also runs migrators from plugins to help automate the migration process.
When running the vue upgrade command, there's now an extra confirmation step when the CLI finds uncommitted changes in the current repository.
Whitespace handling also improves in Vue CLI version 4, for the following template:
<p>
Welcome to <b>Vue.js</b> <i>world</i>.
Have fun!
</p>
In version 3 of the Vue CLI setting, the preserveWhitespace flag to false would compile as:
<p> Welcome to <b>Vue.js</b><i>world</i>. Have fun! </p>
This would unfortunately produce an undesired result:
Welcome to Vue.jsworld. Have fun!
The Vue CLI now provides developers with a whitespace: 'condense' option to solve this issue:
<p> Welcome to <b>Vue.js</b> <i>world</i>. Have fun! </p>
The output produces the expected result:
Welcome to Vue.js world. Have fun!
This new CLI configuration removes extraneous whitespace with more accuracy and efficiency.
This latest stable release of Vue CLI also upgrades many of the underlying major dependencies. In addition to core-js-3, Nightwatch 1.x, and Jest 24, Vue CLI 4 includes Mocha 6, workbox-webpack-plugin and more.
Another improvement to the Vue CLI is better handling of asynchronous operations while applying generators from plugins. The version 4 Vue CLI release supports async functions in generators. Additionally, the newly introduced afterInvoke and afterAnyInvoke hooks provide listening to plugin invocation inside another plugin.
To learn more about Vue CLI version 4, refer to the Vue CLI migration guide.
Vue CLI is available as open source software under the MIT license. Contributions are welcome via the vue-cli GitHub repository. Contributors should follow the Vue CLI contribution guidelines.