Как подключить библиотеку во vue.js 3?

Question

[Sigma Male]

Пытаюсь подключить библиотеку для куки https://www.npmjs.com/package/vue3-cookies
Проект собираю через галп + вебпак

Установил библиотеку через npm, импортировал, но выдает онибку:
vue.min.js?_v=20220825154421:1073 Uncaught TypeError: Cannot read properties of undefined (reading 'set')
at Proxy.login (app.js:33:21)
at Proxy.created (app.js:24:10)
at Jt (vue.min.js?_v=20220825154421:1027:25)
at qt (vue.min.js?_v=20220825154421:1035:17)
at fr (vue.min.js?_v=20220825154421:2816:5)
at dr (vue.min.js?_v=20220825154421:2786:13)
at ei (vue.min.js?_v=20220825154421:4967:7)
at vue.min.js?_v=20220825154421:4006:26
at vue.min.js?_v=20220825154421:4007:19
at P (vue.min.js?_v=20220825154421:4010:15)

Мне кажется я пытаюсь подключить как во Vue CLI. Возможно нужно подключать другим способом?

import { useCookies } from "vue3-cookies";

const App = {
  data() {
    return {
      mobNavVisible: false,
      checked: true,
      homemodal: false,
    }
  },
  created() {
    /*if (this.cookies.get("login")) {
      this.login = true;
      alert()
    } else {
      this.login = false;
    }*/
    this.login()
  },
  methods: {
    signOut() {
      /*this.login = false;
      this.$cookies.set('login', false)*/
    },
    login() {
      this.login = true;
      this.$cookies.set('login', true)
    }
  }
}

Vue.createApp(App).mount('#app')
// Вот так тоже не работает: Vue.createApp(App).use(useCookies).mount('#app')

Мне кажется я просто не умею подключать библиотеки для использования в обычном VUE (не VUE CLI)

Answer 1

[Антон Антон]

ты пытаешься смешать composition api и options api.
Если пользуешься options api, то убери import { useCookies } from "vue3-cookies";, найди место, где создается экземпляр vue (где-то в index.js или подобном месте ищи createApp()) и добавь туда строки подключения плагина для options api:

import VueCookies from 'vue3-cookies'

let app = createApp(App);
app.use(VueCookies);
app.mount('#app')

или переходи на composition api и там уже useCookies и вот это все. В принципе, в документации всё описано.

Comments

[Антон Антон]

Sigma Male, ты пытаешься смешать composition api и options api.
Если пользуешься options api, то убери import { useCookies } from "vue3-cookies";, найди место, где создается экземпляр vue (где-то в index.js или подобном месте ищи createApp()) и добавь туда строки подключения плагина для options api:

import VueCookies from 'vue3-cookies'

let app = createApp(App);
app.use(VueCookies);

[Sigma Male]

Антон Антон, Класс, помогло. Измени текст ответа на текст комента выше, что бы я обозначил правильный ответ.

[Антон Антон]

Sigma Male, уже