[Vuejs]-'Cannot read property 'set' of undefined' Error For 'this.$cookies.set'

by

0👍

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

Leave a comment