Problem with handling Browser Cookies in vue.js - vue.js

Question

Well, I have a problem with a plugin handling browser cookies in vue.js
I installed plugin and imported it in main.js. I configured it too like below:
import { createApp } from "vue";
import { createPinia } from "pinia";
import { globalCookiesConfig } from "vue3-cookies";
import App from "./App.vue";
import router from "./router";
import { useMainStore } from "#/stores/main.js";
import { useStyleStore } from "#/stores/style.js";
import { darkModeKey, styleKey } from "#/config.js";
import "./css/main.css";
globalCookiesConfig({
expireTimes: "30d",
path: "/",
domain: "",
secure: true,
sameSite: "None",
});
/* Init Pinia */
const pinia = createPinia();
/* Create Vue app */
createApp(App).use(router).use(pinia).mount("#app");
/* Init Pinia stores */
const mainStore = useMainStore(pinia);
const styleStore = useStyleStore(pinia);
/* Fetch sample data */
mainStore.fetch("clients");
mainStore.fetch("history");
/* App style */
styleStore.setStyle(localStorage[styleKey] ?? "basic");
/* Dark mode */
if (
(!localStorage[darkModeKey] &&
window.matchMedia("(prefers-color-scheme: dark)").matches) ||
localStorage[darkModeKey] === "1"
) {
styleStore.setDarkMode(true);
}
/* Default title tag */
const defaultDocumentTitle = "SOFT-KOMP";
/* Set document title from route meta */
router.afterEach((to) => {
document.title = to.meta?.title
? `${to.meta.title} — ${defaultDocumentTitle}`
: defaultDocumentTitle;
});
And In my LoginView.vue i inserted this line in function:
this.$cookies.set('hover-time','1s');
Unfortunately I receive this:
runtime-core.esm-bundler.js:218 Uncaught TypeError: Cannot read properties of undefined (reading '$cookies')
So this is my LoginView.vue file. And I tried to test some of other sessions and cookie plugins but results was always the same. PRobably Im not installing this plugin properly in the component or something?
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { mdiAccount, mdiAsterisk } from "#mdi/js";
import SectionFullScreen from "#/components/SectionFullScreen.vue";
import CardBox from "#/components/CardBox.vue";
import FormCheckRadio from "#/components/FormCheckRadio.vue";
import FormField from "#/components/FormField.vue";
import FormControl from "#/components/FormControl.vue";
import BaseButton from "#/components/BaseButton.vue";
import BaseButtons from "#/components/BaseButtons.vue";
import LayoutGuest from "#/layouts/LayoutGuest.vue";
const form = reactive({
login: "john.doe",
pass: "highly-secure-password-fYjUw-",
remember: true,
});
const router = useRouter();
const submit = () => {
router.push("/dashboard");
};
const login = () =>{
this.$cookies.set('hover-time','1s');
}
</script>
<template>
<LayoutGuest>
<SectionFullScreen v-slot="{ cardClass }" bg="purplePink">
<CardBox :class="cardClass" is-form #submit.prevent="submit">
<FormField label="Login" help="Please enter your login">
<FormControl
v-model="form.login"
:icon="mdiAccount"
name="login"
autocomplete="username"
/>
</FormField>
<FormField label="Password" help="Please enter your password">
<FormControl
v-model="form.pass"
:icon="mdiAsterisk"
type="password"
name="password"
autocomplete="current-password"
/>
</FormField>
<FormCheckRadio
v-model="form.remember"
name="remember"
label="Remember"
:input-value="true"
/>
<template #footer>
<BaseButtons>
<BaseButton #click='login' type="submit" color="info" label="Login" />
<BaseButton to="/dashboard" color="info" outline label="Back" />
</BaseButtons>
</template>
</CardBox>
</SectionFullScreen>
</LayoutGuest>
</template>

Answer 1

Well, what you have to is, first import the use in your setup in your LoginView.vue:
import { useCookies } from "vue3-cookies";
Then you can use it like this:
const { cookies } = useCookies();
and then cookies is accessible across your setup.
See answer and comment if you need more info.