Vue-CLI build number - does it exist and how could it be used in a Vue app itself?

Question

I have a Vue app being built for production deployment using Vue CLI.

I would like to include a typical incrementing build number in the application, so that I and testers can be sure we are testing the correct exact build. I would like to use it in the application in at least two ways a) to display it to a tester, and b) to included it in bug-tracking API calls e.g. to Sentry.io.

Currently I have to look at the hash on the app.XXXX.js and compare that. While this does uniquely identify the build, it's not sequential, is different for the CSS/JS/vendors etc and would be difficult to use in the codebase.

I'm happy to write a build wrapper script which manages the number and injects it into the build if that's what it takes.

The command I'm currently using is e.g.

npx vue-cli-service build --mode staging

Answer 1

I've implemented something using the date and time. It's in a Vue 2 project.

Add this code (or something like it) to the top of the vue.config.js file:

const verMajor = 1;
const verMinor = 0;
const now = new Date();
const padTwo = (val) => (val > 9 ? "" : "0") + val;
const nowMonth = now.getMonth() + 1;
const nowDay = now.getDate();
const verBuildDate = now.getFullYear() + padTwo(nowMonth) + padTwo(nowDay);
const verBuildTime = padTwo(now.getHours()) + padTwo(now.getMinutes()) + padTwo(now.getSeconds());
process.env.VUE_APP_VERSION = `${verMajor}.${verMinor}.${verBuildDate}.${verBuildTime}`;

console.log(`Building version: ${process.env.VUE_APP_VERSION}`);

//  ...rest of the config

In the component code, you can do this:

get versionText(): string {
    return process.env.VUE_APP_VERSION;
}

But I'm using class-based components so if you're not, I guess this will work instead:

computed: {
    versionText: funnction () {
        return process.env.VUE_APP_VERSION;
    }
}

And in the template:

Ver: {{versionText}}

This results in something like:

Ver: 1.0.20211013.110634

If that looks too long, I'm sure it could be shortened according to your needs - or you could store a number in a file and write some JS in the config file to increment it on each build - or each release build if you check process.env.NODE_ENV === "release".

For further information, see: https://cli.vuejs.org/guide/mode-and-env.html

:o)

Vue 3

In vite.config.ts, I have:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as fs from "fs";

const packageJson = String(fs.readFileSync("./package.json"));
const packageData = JSON.parse(packageJson);
const packageVersionText = packageData.version || "0.0.0";
const versionText = doSomethingToAddBuildDateAndTimeOrSomething(packageVersionText);

export default defineConfig({
    plugins: [vue()],
    define: {
        "__APP_VERSION__": `"${versionText}"`
    },
    // rest of stuff...

In a component where we want the version (I'm using composition API with 'setup' script):

<script lang="ts">
    declare const __APP_VERSION__: string; // see vite.config.ts
</script>
<script setup lang="ts">

    // componenty stuff...

    const versionNumber = `Version ${__APP_VERSION__}`;  // or whatever

    // more stuff...