Tag Archives: vue3

Reading ntfy stream in vue3-ts page using axios

Leave a reply

The following worked for me


onMounted(async () => {
  refreshMetricInterval = setInterval((_) => {
    fetchData()
  }, C.DEFAULT_POLL_INTERVAL_SEC * 1000)

  // Subscribe to ntfy.
  const ntfy = await axios.get('https://ntfy.sh/mytopic/json', {
    headers: {
      Authorization: 'Bearer yout_token',
      Accept: 'text/event-stream',
    },
    responseType: 'stream',
    adapter: 'fetch',
  });

  //  This doesn't work. We are using fetch API and the below solutions work.s
  //
  // ```
  //  console.debug('axa1', ntfy.data)
  //  ntfy.data.on('message', (data) => {
  //    console.debug(444, data);
  //  });
  // ```
  for await (const data of ntfy.data) {
    const json = JSON.parse(new TextDecoder().decode(data));
    console.debug('Got line from ntfy', json);
  }
})

How to use slot=”foobar” in Vue3

Leave a reply

Following is Vue2 code which is refactored for Vue3 below.

<f7-list-input label="Search patient" :input="false">
    <vue-simple-suggest
        slot="input"
      class="item-input-wrap"
      :max-suggestions="10"
      :nullable-select="false"
      :min-length="4"
      @update:model-select="onPatientSelected"
      :list="queryPatient"
    >
    </vue-simple-suggest>
</f7-list-input>

<f7-list-input label="Search patient" :input="false">
  <template v-slot:input>
    <vue-simple-suggest
      class="item-input-wrap"
      :max-suggestions="10"
      :nullable-select="false"
      :min-length="4"
      @update:model-select="onPatientSelected"
      :list="queryPatient"
    >
    </vue-simple-suggest>
  </template>
</f7-list-input>