How to add git hash to Vue.js Component

Install git-describe as a dev dependency (e.g. yarn add --dev git-describe).

In vue.config.js add:

const {gitDescribe, gitDescribeSync} = require('git-describe');process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash

Now, in every component, we have process.env.VUE_APP_GIT_HASH variable.

Here is how I added it to my app: https://github.com/Quantum-Game/quantum-game-2/pull/164 (with some discussion).

Other approaches

There are other approaches, e.g. using git-revision-webpack-plugin (example for the Vue forum):

const GitRevisionPlugin = require('git-revision-webpack-plugin')module.exports = {  'chainWebpack': config => {    config.plugin('define').tap(args => {      const gitRevisionPlugin = new GitRevisionPlugin()      args[0]['process.env']['VUE_APP_COMMIT_HASH'] = JSON.stringify(gitRevisionPlugin.commithash())      return args    })  }}

Another way is to use git directly, with child-process.

See also

• Including git commit hash and date in webpack build
• Get hash of most recent git commit in Node
• Git log output to XML, JSON, or YAML?

I'm not familiar with Heroku, however I hope some parts of my solution you'll find useful.

I'm developing a vue application, I use GitLab CI/CD and it's deployed to an S3 bucket on AWS then distributed with cloudfront. Sometimes our client will ask for changes that have already been made. So to prevent confusion I wanted to include a the git hash in the footer of the app so we can quickly check that they are looking at the most up-to-date version of the app.

In my .gitlab-ci.yml file I included the following bash commands:

hash=`git describe --always`echo "\"$hash\"" > src/assets/hash.json

This creates a hash.json file, and the only contents of this file are the most recent commit hash as a string. e.g. "015d8f1"

I assume when you deploy to Heroku there is a similar way to execute bash commands.

From there you can just read in that file in any component and use it as data. e.g.

<script>import GitHash from "@/assets/hash.json";export default {  name: "TheFooter",  data() {    return {      GitHash: GitHash    };  }};</script>