While implementing search widget on vue 3, got addWidget is not a function, anyone?

🆘 Support
1

By any chance anyone, got this message? Can suggest a workaround? Currently have it in a component and I’m using ref to insert the content on the div. But getting this error “addWidget is not a function”, also tried to do it without the export default, by putting just the script, but getting the same result. Any advice will be appreciate it :). Here you can see the reference code:

<template>

  <div ref="containerSearch"></div>


</template>
<script>

import { ref, onMounted } from 'vue'
import DatoCmsSearch from "../../../public/src/js/base";
import "../../../public/src/js/datocms-search.widget"

var client = new DatoCmsSearch("MY_SECRET_API_KEY", "production");


export default{

setup() {
      const containerSearch = ref(null)

      onMounted(() => {
          if(client){
            console.log(client);
              client.addWidget(containerSearch);   
          }
      })
      return {
        containerSearch
      }
    }
  }

</script>```
2

Hi @maria.arce sorry for the big delay.

Have you already tried to include datocms-search package with npm (or yarn) in your application and import DatoCmsSearch like this?:

import DatoCmsSearch from 'datocms-search/dist/datocms-search.base';
1 Like
3

Hello faber, thank you for the answer, and yes, I did try that as well. But also did not work for me, so at the end did my own component. Meaning without using the widget :slight_smile:

1 Like