How to get query parameters in Vue

Vue guide logo

Query parameters in Vue

The easiest way to get query parameters in Vue is from the URL is using useRoute from vue-router.

  1. Make sure the vue-router is installed, yarn add vue-router or npm i vue-router.
  2. Get query parameter inside the script tag.
                                
                                        <script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute();

// i.e the url parameter look like this: https://example.com?name=Bob
console.log(route.query.name); // Bob
</script>
                                    
                            
Previous postHow to listen for props changes in Vue
Next postHow to add a class to HTML body in Vue