Yesterday (at the time of writing), the amazing Vue-core team released version beta-15 of the official Vue command line tools. One feature in particular stands out among the usual bug fixes and performance improvements, the new web based user interface for the Vue command line interface. This awesome tool allows Vue developers to graphically create a new Vue project, live monitor app performance, add plugins to an existing project, and more. This is a pretty big deal, as getting familiar with this tool can make spinning up and maintaining any type of Vue.js application a breeze. Lets dive into some of the features head on. The full change-log for this release can be found on the vue-cli github.

New Project Creation

Lets go through the steps of creating a new vue project from scratch.

Open a new terminal/command prompt window. Install and/or update the vue-cli tools to beta-15 with npm i -g @vue/cli Once updated, run vue ui . You should see a message that the gui is starting with an address like http://localhost:8000 . If a browser window does not automatically open then you can manually navigate to this address. A new browser window should open that looks like the following:

Vue ui project manager

5. Navigate to a folder you want to make the project in and click the green “Create a new project here” button to start the process.

6. Select the manual preset, which will then take you to the features page where you can individually include features such as Typescript support, Routing, Testing support, CSS pre-processors, and Vuex.