How to Get Query String Parameter in VueJS

Hello devs, today I'll show you how to get query parameters in VueJS application. Query parameter is one of the best way to filter data according to the given condition. So, let's see how we can get our query parameters value.

Note: Tested on VueJS 2.6.14 and Vue Router@3 

Getting Query Parameters Value

We'll use vue router query object to get query parameter value. Let's see the below source code.

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="[email protected]/dist/vue.min.js"></script>
    <script src=""></script>

<div id="app">


    var router = new VueRouter({
        mode: 'history',
        routes: []

    var myApp =  new Vue({
        el: '#app',
        mounted: function() {
            let parameters = this.$route.query

            let name = this.$




Which will produce the below result.

Getting Query Parameters Value

That's it for today. I hope you've enjoyed this tutorial. If you found any difficulties o questions, catch me in comment sections. Thanks for reading. ๐Ÿ™‚