'Cannot read property 'set' of undefined' Error For 'this.$cookies.set'

Question

I'm trying to set up some rudimentary cookies for my Vue project and I'm running into the title error when trying to set a cookie. I'm using vue-cookies version ^1.7.4 according to my package.json file. The full error message is as follows when I click my button to make a cookie:

ncaught TypeError: Cannot read property 'set' of undefined
    at Proxy.setCookie (VM6493 Register.vue:45)
    at Object.onClick._cache.<computed>._cache.<computed> (Register.vue?db27:29)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:333)
setCookie @ VM6493 Register.vue:45
Object.onClick._cache.<computed>._cache.<computed> @ Register.vue?db27:29
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:333

The page with the cookie-setting button is this Register.vue file:

<template>
  <layout>
    <button v-on:click="setCookie()">Click For Cookie</button>
  </layout>
</template>

<script>
import Layout from "./components/Layout";
import axios from "axios";


export default {
  name: "Home",
  components: {
    Layout,
    vlink
  },
  data: () => {
    return {
      username: "",
    }
  },
  methods: {
    setCookie() {
      this.$cookies.set("username", "bilbobaggins")
    }
  }
}
</script>

<style scoped>

</style>

I get this warning when navigating to the Register.vue page:

[Vue warn]: Extraneous non-props attributes (install, config, get, set, remove, isKey, keys) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <Layout install=fn<install> config=fn<config> get=fn<get>  ... > 
  at <Home install=fn<install> config=fn<config> get=fn<get>  ... > 
  at <App install=fn<install> config=fn<config> get=fn<get>  ... >

Here's my main.js file:

import {createApp, h} from 'vue'
import App from './App.vue'
import Register from "./Register"
import "./vue-api-call/styles.css"
import VueCookies from 'vue-cookies'


const routes = {'/': App, '/register': Register}
const SimpleRouter = {
  data: () => ({
    currentRoute: window.location.pathname
  }),
  computed: {
    CurrentComponent() {
      return routes[this.currentRoute]
    }
  },
  render() {
    return h(this.CurrentComponent)
  }
}


createApp(SimpleRouter, VueCookies).mount("#app")

I have tried changing my function in the Register.vue file from 'this' to 'window' or 'VueCookies' after importing it but, that did not work. I also tried different methods to '.use' the VueCookies module in my main.js file but, I'm either not good at that or it's not the problem. Any help would be appreciated. Thank you!

EDIT: Just tried importing Vue-Cookies in the script section of my Register.vue file and changing the function to VueCookies.VueCookies.set("username", "bilbobaggins") but, that gives the same error message.

Answer 1

Apparently the vue-cookie module doesn't work with Vue 3, because the install function uses the Vue 2 version Vue.prototype.$cookie to make it available in all components. Vue.prototype is now Vue.config.globalProperties in Vue 3 (https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties). That's still an open issue in the vue-cookie module GitHub repo: https://github.com/cmp-cc/vue-cookies/issues/59.

If you're using Vue 3, then you need to go to the vue-cookies node module and change this:

install: function (Vue) {
            Vue.prototype.$cookie = this;
            Vue.cookie = this;
        },

to this:

install: function (Vue) {
            Vue.prototype ? Vue.prototype.$cookies = this : Vue.config.globalProperties.$cookies = this;
            Vue.cookie = this;
        },

LittleWhiteLoti provided this fix, all the credit to them: https://github.com/cmp-cc/vue-cookies/issues/59#issuecomment-823796719