How to Display and Check Vue 2 Application Version?

This quick tutorial will profoundly help you determine how to check the current vue js application version eloquently; we will share a couple of techniques with you to check the version of the vue js app.

Here is the small road map of this quick guide; we will install the vue cli and vue app, then ascertain the shortest techniques to comprehend the nuances of the current vue app version.

After going through this tutorial, you will be able to check the app version through command prompt, one-liner npm command and package.json.

Set Up VUE CLI

Vue CLI is a mandatory tool to create the vue app, so make sure to install it first.

npm install -g @vue/cli

Create Vue App

Let’s begin installing the latest version of the Vue js app with the following command.

vue create vue-vlog-app

Don’t forget to enter into the project.

cd vue-vlog-app

Vue Gatsby Error

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Fix Multi Word Error

In order to fix multi-word error, insert the given code in vue.config.js file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Check Vue Version via Command Prompt

After getting inside the app, let’s try our hands-on; the first pragmatic approach is to find out the current vue app version using a single command.

npm list vue

# output: vue@2.6.12

The above command displays the current app version on the cli interface.

Print Vue Version On Browser’s Console

Let’s jump on to another method, and we must say this method is very simple and drastically reduce the excruciating pain.

We will call the console.log() method and access the version property using the Vue object. It will eloquently print the vue app version on the browser’s console.

import Vue from 'vue'
import App from './App.vue'

// print vue version on console
console.log(Vue.version);

new Vue({
  render: h => h(App)
}).$mount('#app')

You need to start the app development server; after executing the below command development server will start, and the app url will also appear on the command prompt screen.

npm run serve

Check Current Vue Version in pacakge.json

Let me share the easy way to determine the current vue app version, and you need to look for the package.json file in your project root.

After that, open this file and look for the dependencies object; inside this object, you will see a vue prop with an app version number.

  "dependencies": {
     ...
     ...
     ...
    "vue": "^2.6.11",
     ...
     ...
  },

So, this was it; we hope you liked these methods to get the vue app version.