I’ve been learning JavaScript (beginner level), and just started learning Vue framework. I read Essential section of the official Vue doc, and now I’d like to do some hands-on with Examples.

In this post, I setup a dev environment for Vue in my homelab Ubuntu server. I remotely access source files and the dev server via Emacs over Tramp and a browser over ssh tunneling respectively from a laptops (chromebook).

Prerequisites:

  • Headless server running Ubuntu (or other distribution)
  • Can ssh to the server with ssh-key
  • Emacs can edit files in the server via Tramp

First, (take a snapshot of the Ubuntu VM and) update Ubuntu of the homelab server.

sudo apt update
sudo apt upgrade

Install node.js

node.js has the dev environment for js, incl. compiler and dev server.

sudo apt install  ca-certificates curl gnupg
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install  nodejs

To verify:

node -v
v20.20.0

Install pnpm

I decided to use pnpm in place of npm as it seems to be faster and better. corepack is a package maneger-manager included in node.js.

sudo corepack enable
sudo corepack prepare pnpm@latest --activate
pnpm -v

! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.30.1.tgz
? Do you want to continue? [Y/n]

10.30.1

Create Vue project

Prep is done and I’m ready to create a Vue project.

pnpm create vue@latest my-app
cd my-app
pnpm install

Run the dev server

pnpm run dev -- --host 127.0.0.1 --port 5173

If I go to localhost:5173 from the browser on the homelab server, I should be able to see the web page. But as this is for remote development, let’s move on to the next step.

Access from remote via ssh tunneling

Configure ssh tunneling from laptop to the homelab server. On laptop:

ssh -L 5173:localhost:5173 act

This maps laptop’s 5173 port to that of the homelab server (act).

Then, open in a browser on the laptop: localhost:5173. It showed:

You did it!
Visit vuejs.org to read the documentation

Great! ssh tunneling looks to be working as expected.

Configure Emacs web-mode with eglot + lsp

The next step is for Emacs to edit source files in the server. Run the Vue language server, and configure vue-mode for eglot.

Install the vue language server

pnpm install -g @vue/language-server
which vue-language-server

Add to ~/.emacs/init.el:

(use-package web-mode
  :mode ("\\.vue\\'" . web-mode)
  :hook (web-mode . eglot-ensure)
  :config
  (setq web-mode-script-padding 0
        web-mode-style-padding 0
        web-mode-block-padding 0
        web-mode-markup-indent-offset 2
        web-mode-css-indent-offset 2
        web-mode-code-indent-offset 2))

I tried vue-mode as well, but indentation and highlighting were clumsy. web-mode looks better.

Edit src/App.vue on Emacs, and then build.

pnpm build