Creating and Managing Vue.js Projects with Graphical User Interface (GUI) or Vue UI

Vue 3.0 gives us a Graphical User Interface (GUI) to create and manage Vue.js projects.

But why do we need this GUI ? What are the advantages of using this ? How does it ease our work ?

Advantages

1. We can manage our local Vue projects
2. We can configure your Vue apps without messing up the configuration files.
3. We can install plugins easily. E.g — Vuetify
4. We can install all the npm dependencies easily without writing the command “npm install <dependency-name>”
5. Manage our tasks (run, stop, build) graphically. We don't have to write commands to serve the app or to build the app.

I found this tool awesome and user-friendly. This tool eases our workflow.

If you are new to Vue.js, I would suggest you not to use this GUI tool. First of all, learn to install the dependencies, extensions and run the app manually. When you are an expert in this, go ahead and make use of this tool to ease the flow of your work.

Getting Started

To get started you should install vue-cli first. Run the following command

npm install -g @vue/cli
           OR
yarn global add @vue/cli

I am assuming that you would have NodeJs installed already on your system.

To launch Vue GUI in your browser, please run the following command

vue ui

Vue GUI will open in your browser which looks like this

I already had an application named “my-flight” on my system, which is listed in the above screenshot.

Click on “Create” tab and then click on “Create a new project here” .

That will bring you here

Fill in the details according to your preference. Change the Package Manager to npm or yarn according to your choice and then click on Next.

Choose “Default preset [Vue 2] babel, eslint” and click on “Create Project”.

This will install all the cli plugins and will create your project. Wait for a while and we are done.

Voila !! Our project setup is ready.

Now let us explore what all facilities do we have here. Do u see the left panel ? Let us have a look at each one of them.

Plugins

This shows us the list of all the plugins installed. If we want to add a new plugin, we can click on “Add Plugin” present at the top right corner of the screen. All we have to do is, search for the plugin we want to install and click on install. That’s it.

Dependencies

Install various dependencies like bootstrap, sass-loader etc using the “Add Dependency” button.

Configuration

We also have the option to change some project configurations. For example, if we want to change the directory where the production builds will be saved , we can do this here..

Tasks

The tasks tab allows us to run a task such as serve, build, inspect etc. The serve tasks stats the development server. The build task builds the app.

Also on this page, we see can see a dashboard with the analysis of the project’s dependencies, size, asset size, errors and many more things. Explore these tools for more information.

Try this tool to create projects, install plugins and dependencies, run tasks etc.

I loved this tool. I hope you will like it too.

Thank you for reading this article. Give it a clap if this helped you. Also give your valuable comments.