HowTo - display package version in Vue.js application

Want to display your Vue.js application version? There is a solution for that - you can easily import version from your package.json file.

First of all, let’s check package.json file of your application (assuming you have one :) )

{
  "name": "Your application name",
  "version": "1.2.3",
  "description": "...",
  "author": "...",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "engines": {
    ...
  }
}

Version field in package.json should reflect a correct application version. Let’s import it in your application.

Step 1: Import version to your Vue file

import { version } from "path/to/package.json"

Step 2: expose version to data section

export default {
  data () {
    return {
      applicationVersion: version
    }
  }
}

Step 3: display version

<h1>My application version: {{ applicationVersion }}</h1>

That’s it! Now application version is visible in the application. You can also import version to Vuex store and use it in all Vue files.

Image credits:

• jcomp / freepik