CodeWorks Blog

The things we enjoy learning and teaching

Vue 3.0 CLI - Getting Started, Faster

Vue 3.0 CLI - Getting Started, Faster

Vue.js is a JavaScript based framework that allows developers to create a SPA(Single Page Application). If you haven't heard, Vue is on the up and up and is known for its ease of use and intuitive design that lowers the knowledge bar of entry. On GitHub, at the time I write this, Vue has passed all of the other JavaScript front end frameworks by number of stars. With popularity rising Vue has had to adapt to take on some of the most prominent challenges of the modern developer. Some of those challenges are configuration fatigue, incorporating best practices, and efficiently combining multiple tools.


With these challenges in mind, Vue-CLI 3.0 is here. The newest version of the command line interface directly addresses configuration by allowing the user to quickly and easily make multiple selections of tools and support for them and then save that configuration as a default by name for quick selection later. Very often we find ourselves starting with the same basic template for many new projects, making this feature brilliant!


The answer to integrating all of the packages a project might need, and in an elegant way that meets industry standards for Vue, is to provide a customizable but built in toolchain. With the configuration help of the CLI the end-user is able to incorporate these tools in the project and allow Vue to take into account the best practices and standards of the industry for implementation.


As we create a project and begin to add tooling, it can be easy to go down a road of adding pieces here and there without a lot of thought to the end result. What might of began as an elegant sports car, quickly and easily can devolve into a junker that has had parts bolted on without a concern to how it will run and look after its all said and done. The Vue app created through this toolchain will already be up to industry standard without the developer having to carefully architect every step of the build phase.


CLI 3.0 has added support for building a PWA(Progressive Web Application), look out mobile apps! TypeScript, which also continues to grow in popularity because intellisense is awesome and makes a developers life easier while also helping enforce good coding practices. Two of the bigger libraries for Vue, known as Vue Router and Vuex. Vue Router allows the developer to simulate multiple pages in a SPA. Vuex gives the app a store or single source of truth as well as a unidirectional data flow pattern similar to Redux(both are based on flux) with some differences in how the state is managed.


In short, Vue has continued to improve on the main thing that helped move it to the top of the massive pile of frameworks out there, and that thing is Vue is ready to use out of the box quickly, easily, and most importantly professionally. The straightforward experience is nice for both the new developer and the experienced.