title: Vue cli 3 display info from the package.json
body: <p>In a vue cli 3 project I want to display a version number in the webpage. The version number lies in the <code>package.json</code> file.</p>
  <p>The only reference to this that I found <a href="https://forum.vuejs.org/t/in-cli3-how-to-get-version-from-package-json/34876/5" rel="noreferrer">is this link in the vue forum</a>.</p>
  <p>However, I can't get the proposed solution to work.</p>
  <h2>Things I tried</h2>
  <ol>
  <li><h3>Use <code>webpack.definePlugin</code> as in the linked resource:</h3>
  </li>
  </ol>
  <p><code>vue.config.js</code></p>
  <pre><code>const webpack = require('webpack');
  
  module.exports = {
    lintOnSave: true,
  
    configureWebpack: config =&gt; {
      return {
        plugins: [
          new webpack.DefinePlugin({
            'process.env': {
              VERSION: require('./package.json').version,
            }
          })
        ]
      }
    },
  }
  </code></pre>
  <p>Then in <code>main.ts</code> I read <code>process.env</code>, 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 <code>package-json</code>). It never worked, it is like the code is being ignored. I guess the <code>process.env</code> is being redefined later by vue webpack stuff.</p>
  <p>The <code>process</code> log in <code>main.ts</code> contains, however, all the stuff that <code>process</code> usually contains in a vue-cli project, like the mode and the VUE_APP variables defined in <code>.env</code> files.</p>
  <ol start="2">
  <li><h3>Try to write to <code>process</code> right on the configure webpack function,</h3>
  </li>
  </ol>
  <p>like:</p>
  <pre><code> configureWebpack: config =&gt; {
     process.VERSION = require('./package.json').version
   },
  </code></pre>
  <p>(to be honest I did not have much hope with this, but had to try).</p>
  <ol start="3">
  <li><h3>Tried the other solution proposed in the linked page,</h3>
  </li>
  </ol>
  <p>like:</p>
  <pre><code>// vue.config.js
  module.exports = {
    chainWebpack: config =&gt; {
      config.plugin('define').tap( ([options = {}]) =&gt; {
        return [{
          ...options, // these are the env variables from your .env file, if any arr defined
          VERSION: JSON.stringify(require('./package.json').version)
        }]
      })
    }
  } 
  </code></pre>
  <p>But this fail silently too.</p>
  <ol start="4">
  <li><h3>Use the <code>config.plugin('define')</code> syntax suggested by @Oluwafemi,</h3>
  </li>
  </ol>
  <p>like:</p>
  <pre><code>chainWebpack: (config) =&gt; {
    return config.plugin('define').tap(
      args =&gt; merge(args, [VERSION])
    )
  },
  </code></pre>
  <p>Where <code>VERSION</code> is a local variable defined as:</p>
  <pre><code>const pkgVersion = require('./package.json').version;
  
  const VERSION = {
    'process.env': {
      VUE_APP_VERSION: JSON.stringify(pkgVersion)
    }
  }
  </code></pre>
  <p>But this is not working either.</p>
  <hr />
  <p>I am re-starting the whole project everytime, so that's not the reason why the process stuff does not show up.</p>
  <p><strong>My vue-cli version is 3.0.1</strong>.</p>