Vue cli 3 display info from the package.json

Question

In a vue cli 3 project I want to display a version number in the webpage. The version number lies in the package.json file.

The only reference to this that I found is this link in the vue forum.

However, I can't get the proposed solution to work.

Things I tried

1. Use webpack.definePlugin as in the linked resource:

vue.config.js

const webpack = require('webpack');

module.exports = {
  lintOnSave: true,

  configureWebpack: config => {
    return {
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            VERSION: require('./package.json').version,
          }
        })
      ]
    }
  },
}

Then in main.ts I read process.env, but it does not contain VERSION (I tried several variants to this, like generating a PACKAGE_JSON field like in the linked page, and generating plain values like 'foo' instead of reading from package-json). It never worked, it is like the code is being ignored. I guess the process.env is being redefined later by vue webpack stuff.

The process log in main.ts contains, however, all the stuff that process usually contains in a vue-cli project, like the mode and the VUE_APP variables defined in .env files.

2. Try to write to process right on the configure webpack function,

like:

 configureWebpack: config => {
   process.VERSION = require('./package.json').version
 },

(to be honest I did not have much hope with this, but had to try).

3. Tried the other solution proposed in the linked page,

like:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap( ([options = {}]) => {
      return [{
        ...options, // these are the env variables from your .env file, if any arr defined
        VERSION: JSON.stringify(require('./package.json').version)
      }]
    })
  }
} 

But this fail silently too.

4. Use the config.plugin('define') syntax suggested by @Oluwafemi,

like:

chainWebpack: (config) => {
  return config.plugin('define').tap(
    args => merge(args, [VERSION])
  )
},

Where VERSION is a local variable defined as:

const pkgVersion = require('./package.json').version;

const VERSION = {
  'process.env': {
    VUE_APP_VERSION: JSON.stringify(pkgVersion)
  }
}

But this is not working either.

---

I am re-starting the whole project everytime, so that's not the reason why the process stuff does not show up.

My vue-cli version is 3.0.1.

Answer 1

I am adding my 2 cents, as I found a shorter way and apparently the right way (https://docs.npmjs.com/misc/scripts#packagejson-vars)

Add this in your vue.config.file before the export, not inside:

process.env.VUE_APP_VERSION = process.env.npm_package_version

And voilà!

You can then use it from a component with process.env.VUE_APP_VERSION