Windows with Vue

Photo by Samuel Zeller on Unsplash

This week I’ve gotten into Vue and had to set up on Windows. After trials and errors, I think I now have a good idea of what I’m doing. This post will walk you through how to set up Vue on Windows so you too can get started with Vue CLI. It’s also to document my knowledge process while it’s fresh in my mind.

Pre-requisites

So… I’m on Windows 10 Pro this time around and using PowerShell as my default terminal in Visual Studio code to do this.

Step 1

We will need to ensure we have Node installed else we’ll get that dreaded ‘the term npm is not recognized as the name of a cmdlet’.
a) Head over to Node installation page to download the Node installer for Windows systems. This will come bundled with NPM for handling all our future packages installations. An alternative ‘package manager’ for Windows includes Chocolatey.
b) When installing, click through the defaults and once finished, you should have node and npm installed.
c) Open Powershell and confirm everything is working by typing:

> node -v 
> npm -v 

node and npm version

If you don’t get something similar to the screenshot then try the troubleshooting steps below.

Troubleshooting

If you run into the same dreaded not recognized cmdlet blah blah, then you might have to go in and nudge Windows system in the right direction by setting up PATH in environment variables.

Open Control panel > System and Security > System > Advanced system settings > Environment Variables
Select PATH in User variables and add:
C:\Users\USERNAME\AppData\Roaming\npm
Might not need to do this part but repeat editing PATH environment variable under System variables and add:
C:\Program Files\nodejs\
Save and get out of there!
Restart PowerShell window or the entire system and try Step 1c again.

Step 2

OK! Let’s get on with what we actually want to do.
Install Vue CLI:

> npm i -g @vue/cli @vue/cli-service-global

Now check Vue is installed by typing:

> vue --version

If all goes well, and you are returned a version number, you are ready to start creating Vue applications.

screenshot of Vue version check

Bonus steps

You can get started using:

> vue create vue-demo-app

‘vue-demo-app’ being the name of your app. Accept default answer to questions and you are off.

Alternatively, you can use the Vue graphical interface, if you’re not a fan of the command line, by typing:

> vue ui

Vue UI starting up

This will open up the Vue project manager in your browser.

screenshot of Vue UI