I'm facing an issue while setting up basic cookies for my Vue project. When I try to set a cookie, I encounter the following error. My package.json file indicates that I am using vue-cookies version ^1.7.4. The error message occurs when I click the button to create 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:333The Register.vue file contains the button responsible for setting the cookie:
<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>Upon navigating to the Register.vue page, a warning is displayed:
[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> ... >This is how my main.js file looks like:
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 attempted changing the function in the Register.vue file from 'this' to 'window' or 'VueCookies' and also tried different ways to '.use' the VueCookies module in my main.js file. However, none of these attempts resolved the issue. Any assistance would be greatly appreciated. Thank you!
EDIT: Just experimented with importing Vue-Cookies in the script section of my Register.vue file and modifying the function to
VueCookies.VueCookies.set("username", "bilbobaggins")