VueJs: How to Get the App Version from package.json

This is a quick tutorial on how we can access the app version.

While building applications, there may be a different phase of development. We need to have a clear vision that which version of the application is on the server.

In the VueJs application under package.json file, you can see the one property called version. We can use this version while deploying to indicate the different versions of the application.

So, what we can do is simply increase the value for a different version of development.

The version can be accessed in our application by simply importing this file as below:

import {version} from '../../package'

Make sure it's accessible. Here, e.g '../../' will give the access for the package which is used under /src/somefolder/component.vue. As the package.json file is under the app root directory. If you want it inside App.vue you can use '../' instead.

data: () => ({
    appVersion:version
  }),

Now access in your template or can set in the store and access it.

<h1>{{appVersion}}</h1>

If you want the package version inside npm script:

const version = process.env.npm_package_version

Read More