Install Vue.js on Ubuntu 22.04 LTS – Quick, No‑Nonsense Steps
Vue is the go‑to framework for building reactive UIs, and getting it set up on Ubuntu 22.04 is surprisingly painless once you know what to do. Below I’ll walk through a straight‑up method using NVM (Node Version Manager) so you can keep your Node ecosystem tidy while installing Vue’s CLI.
Why start with NVM?
You’ve probably heard the warning: “Installing Node globally can bite you later.” That’s because every project tends to need a different Node version. I once pulled an older repo on Ubuntu 20.04 that broke after a system update pushed Node 18 into /usr/bin – the project was stuck on Node 12 and blew up in my terminal. NVM sidesteps that by letting you install, switch, and manage multiple Node releases locally.
Step 1: Install prerequisites
sudo apt update && sudo apt install -y build-essential curl
Why? The `build-essential` package gives you the compiler tools that many npm packages need during installation. Without them you’ll hit “make: command not found” errors before Vue even starts to talk.
Step 2: Grab NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
Why? This script drops the `nvm` shell function into your profile so you can run `nvm install` later. I’ve used this on a handful of machines, and it never fails to load correctly.
After running the script, reload your shell:
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "$HOME/.nvm" || printf %s "$XDG_CONFIG_HOME/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
You can also just close and reopen the terminal – it’s a quick fix.
Step 3: Install Node
nvm install node # installs the latest LTS (currently 20.x)
Why? Vue’s CLI works best with an up‑to‑date LTS version. If you need a specific Node minor, replace `node` with that exact number.
Check it worked:
node -v && npm -v
Both should print a version string.
Step 4: Install Vue CLI globally
npm install -g @vue/cli
Why? The CLI is the command‑line tool that scaffolds projects, adds plugins, and serves your app locally. Installing it globally with npm gives you `vue` in every shell.
If you prefer a lightweight alternative, there’s also the “Vite” starter, but for pure Vue 3 experience the official CLI remains the gold standard.
Step 5: Create a fresh project
vue create my-vue-app
You’ll be prompted to pick a preset. For a quick start choose Default (babel, eslint). Hit Enter for each prompt.
Why? This scaffold includes a minimal but production‑ready build pipeline and linting that saves you from debugging “what’s wrong with this file?” later.
Step 6: Run the dev server
cd my-vue-app npm run serve
Open < http://localhost:8080> in your browser. If all went well, you’ll see the default Vue welcome page. You can now edit `src/App.vue` and watch changes hot‑reload.
Common hiccup: “Permission denied” when installing global npm packages
If you ever hit a permissions error with `npm install -g`, it’s usually because your home directory is owned by root after a system upgrade. Fix it once:
sudo chown -R $(whoami) ~/.config ~/.cache
After that, NPM will happily write to the proper locations.
Quick sanity check
Run:
vue --version
If you see something like `@vue/cli 5.0.8`, congratulations – your setup is ready for action.
That’s all there is to it. No hidden flags, no fiddly configuration files, just a clean install that lets you focus on building cool UIs.
