Getting the browser cookie in Vue App

we are going to learn about how to get a cookie from the browser in Vue using the vue-cookies (npm) package.

Installing the vue-cookies package

The vue-cookies packages help us to easily get the cookies in a vue app.

Run the following command to install the package.

npm install vue-cookies

Now, open your main.js file and add the following (highlighted) configuration.

import Vue from "vue";import VueCookies from 'vue-cookies';import App from "./App.vue";Vue.use(VueCookies);new Vue({  render: h => h(App)}).$mount("#app");

This adds the this.$cookies object to our root app, so that we can access it inside our vue components <script> tag.

Getting the cookie

To get a cookie inside the vue component, we need to use the this.$cookies.get() method by passing a cookie-name as its argument.

Here is an example:

<template>  <div id="app">     <h1>Vue cookies</h1>     <button @click="getCookie">Get Cookie</button>  </div></template><script>export default {   methods:{     getCookie(){         // it gets the cookie called 'username'      const username = this.$cookies.get("username");      console.log(username);     }   }};</script>

Note: If you set an httpOnly to the response, then you can’t access it inside the vue app.