How to show your App Version from package.json in your Vue application

Paolo Mioni
Nov 16, 2018 · 4 min read
Photo by Pankaj Patel on Unsplash

IMPORTANT: SECURITY UPDATE

This article has been updated on Sep 20th, 2019 to reflect some security concerns that were expressed by Aaron W in the comments. Instead of importing the whole package.json file, we’re only importing the version number. Thanks Aaron!!

When your Vue application is not just a web-based app or website, but it is a proper application, it can be distributed and packaged in different versions to different end-users. In those cases it is very useful to show your application version somewhere in your layout. If the application does not work as expected, it’s very easy to check if the user is using an old version.

After spending one hour looking for the right solution for this task, I found one and managed to make it work on one of our Vue CLI 3-based applications. Once I got it to work, I decided to spend another hour writing this article in the hope of saving you guys some time!

Exporting package.json’s version property

First thing, you should edit your vue.config.js file, which you can find in the root folder of your Vue CLI 3 project. You should change the module.exports section so that it looks like this:

const fs = require('fs')
const packageJson = fs.readFileSync('./package.json')
const version = JSON.parse(packageJson).version || 0
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
PACKAGE_VERSION: '"' + version + '"'
}
})
]
},
// the rest of your original module.exports code goes here
}

This exports the version of yourpackage.json file in a global property which you can access in your code using the process.env object. If for whatever reason the version property is not available in the package.json file, it will be exported as 0 (Zero).

Reading the imported content and processing it

It is useful to have a centralized point where to read the data and make it available to the rest of the app, and the best place is your VueX store. In store/index.js, add the following code:

export default new Vuex.Store({
state: {
packageVersion: process.env.PACKAGE_VERSION || '0'
// the rest of your state here

What does this do? It reads the content of the variable that you had set at compile time and makes it available as a Store property.

You then need to add a getter to be able to read it in our Vue application. I’ve called it appVersion. See the code above.

Using the package version in your app

This can be done in several ways.

If you want to use it directly in your template’s HTML code, you just need to do this:

My Awesome App version {{ $store.getters.appVersion }}

If you want to use it in a computed function (maybe to add some extra custom formatting in the context in which you’re using the value), you can do this:


computed: {
appVersion () {
return this.$store.getters.appVersion
}
// other computed values here
},

If you just want to dump it to the developer console, you can for example do the following in your mounted hook in some component:

mounted () {
console.info('App version ' + this.$store.getters.appVersion)
}

And so on.

You can use this system to read more properties from your package.json, if needed, but you are strongly advised, if your application has any security concerns , not to include the whole package.json file in your code as exposing the versions of the libraries you use in your project might make life easier to a hacker. See the comments section below for more info on the problem.

Remember, in general you don’t have security concerns only if your application is an internal test or a University assignment. If your code runs in production anywhere, you should worry about application security. If your code manages sensitive data, or might be run on a site that manages sensitive data, your should definitely be very cautious.

Conclusion

At this moment, you should have applied the code above to your application, StackOverflow-style, and left the building.

If you’re still with me, I have to add a couple of considerations:

  • This system allows you, with little extra work, to keep the version number in your front-end synced to the place where you should be keeping it updated anyway, that is your package.json file. No need to add it statically to some .env file every time you bump version.
  • If you put your version number on top of your loading screen in a small print, Fortnite-style, people will need to reload your app to read the version. I would suggest to add it to a footer or to a Help -> About dialogue somewhere in your layout. Fortnite is not always cool.

Thanks for your kind attention, and don’t forget to clap and point out all of my mistakes in the comments.


DISCLAIMER

Most of the solution comes from this forum post (and other similar ones): https://forum.vuejs.org/t/in-cli3-how-to-get-version-from-package-json/34876, I’ve expanded it, explained it and made some changes for your convenience.

HCEverything

A blog by Italian web design company HCE.IT. Tech, humour, code and nonsense.

Paolo Mioni

Written by

CTO and co-founder at HCE.IT: lover of front-end development, complex technical problems and noisy electric guitars.

HCEverything

A blog by Italian web design company HCE.IT. Tech, humour, code and nonsense.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade