How to update vue-cli to latest version?

featured Image

While creating a Vue project, if you see a message to update to the latest version like Vue CLI v3.5.0 or above. Then you have to follow the steps below to update your Vue CLI to the lastest stable version.

If you are using version 2 or older then you have to uninstall it first.

Uninstall old vue-cli version

The vue-cli is the older version and the package name is changed from vue-cli to @vue/cli.

So to install or update your vue-cli, you have to uninstall the older version first.

To uninstall, type this command (if you are on older version 2 or older ) :

npm uninstall -g vue-cli

If you want to uninstall vue/cli version 3 or above. (You can skip this part, if you just want to update)

npm uninstall -g @vue/cli

This will uninstall the package globally from your computer.

Install latest version of vue/cli

This command will install vue-cli latest version globally in your computer.

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

After installation you can verify if vue is installed properly in your computer by running vue in your command line. It will list all the available commands for vue.

To check vue version type:

vue --version

NOTE:

Its better to have the latest stable version of NodeJS when you update / install Vue CLI in your computer.

Update vue-cli to latest version (v3 or v4)

If you are still on version 2 or older of Vue CLI, you cannot update directly using npm upgrade , then you have to follow the steps shown above.

First uninstall the older version using:

npm uninstall -g vue-cli

And then install the lastest version of the package using:

npm install -g @vue/cli@latest

If you are using the version 3 , then to upgrade the global Vue CLI package, run:

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

Related Topics:

How To Change Default Port Number In Vue-Cli?

How To Remove Hashbang (#) From URL In Vue ?

Related Posts

featured Image

How to add common header and footer in vuejs.

Here, in this article, we will learn how to add a common header and footer component in our vuejs application. In general, we always have the same header and footer…

Read more
featured Image

How to call a function in VUE template?

Here, we will learn on how to call a function in vue template. First, we have to define the function in the methods. and then we can use an event…

Read more
featured Image

How to redirect to external url in vue

Here, we will learn how to redirect to an external URL in vuejs application. Page Navigation is one of the basic features of a website. It helps us to navigate…

Read more