ESLint doesn't find this.$cookies

[julisch94]

Sorry, if I missed something crucial in the documentation on how to set up this lib. Unfortunately, I can't manage to provide you with a Stackblick link either. I hope you can still help me.

TL;DR

My ESLint and VS Code keep complaining about this.$cookies being non-existent. What am I missing in my set up? I'm using Vue3, Typescript, VS Code.

This is the error I get:

ERROR in src/components/CookieConsent.vue:23:23
TS2339: Property '$cookies' does not exist on type 'ComponentPublicInstance<{} | {}, {}, { show: boolean; }, {}, { hide(): void; }, EmitsOptions, {} | {}, {}, false, ComponentOptionsBase<{} | {}, {}, { show: boolean; }, {}, { hide(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.
  Property '$cookies' does not exist on type '{ $: ComponentInternalInstance; $data: { show: boolean; }; $props: {} | {}; $attrs: Record<string, unknown>; $refs: Record<string, unknown>; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... &...'.
    21 |   },
    22 |   mounted() {
  > 23 |     this.show = !this.$cookies.get("cookie-consent");
       |                       ^^^^^^^^
    24 |   },
    25 |   methods: {
    26 |     hide(): void {

The steps I've done

yarn add vue-cookies

Then I added this to my main.ts:

import VueCookies from "vue-cookies";

createApp(App).use(VueCookies).use(router).mount("#app");

And finally I try to use $cookies in my component:

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CookieConsent",
  data() {
    return {
      show: false,
    };
  },
  mounted() {
    this.show = !this.$cookies.get("cookie-consent");
  },
  methods: {
    hide(): void {
      this.$cookies.set("cookie-consent", 1);
      this.show = false;
    },
  },
});
</script>

[cmp-cc]

update to v1.8.1

support vue3 ts options api declare

[julisch94]

OMG thank you so much!