Showing the application version in a Vite-based Vue.js app

Tue, 22 Sep 2026 00:00:00 +0000

This article shows how to set the version of a Vite-based Vue.js app automatically at build time, using a Docker build argument fed by an environment variable provided by CI/CD, such as the Git tag being built.

It is tempting to read the version from the version field of package.json instead, since it is already there. This only works for Node.js projects, though, so the same approach could not be reused for an application written in another language. Relying on a Git tag also means a release does not require cloning the repository and bumping a file locally: it is often just as easy to create the tag from the GitLab UI directly.

Runtime environment variables in a Vue.js app

Mon, 21 Sep 2026 00:00:00 +0900

In a Vue.js app built with Vite, environment variables such as VITE_API_URL are read from import.meta.env. This is convenient, but Vite replaces the VITE_ environment variables with their values during the build. This means they cannot be changed at runtime.

This article presents a workaround: when the container starts, a small JavaScript file is generated to copy the container’s environment variables onto window. The app then reads its configuration from there.

Vite on Maxime Moreillon

Showing the application version in a Vite-based Vue.js app

Runtime environment variables in a Vue.js app