#community-help

Resolving Typesense Setup Issues with VueJS

TLDR A sought help with setting up Typesense in a CDN VueJS application. Jason guided him to adjust the initialization and provided a solution to an undefined item warning, resulting in a successful setup.

31mo

Join the chat

Jul 09, 2021 (31 months ago)

Photo of md5-98c72c3023867be0346b48ae4cb22001

A

05:13 AM

trying to set up typesense with the cdn vuejs implementation + adapter, but it’s not working — anything wrong with my setup?

https://pastebin.com/gsLEXH7D

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

05:17 AM

You’d need to initialize vue-instantsearch this way: https://github.com/typesense/typesense-instantsearch-adapter#with-vue-instantsearch

And remove the current instantsearch initialization lines which is only for instantsearch.js (Lines 37-57)

A

05:21 AM

Does the order of imports matter?

05:21

A

05:21 AM

<script src=“https://cdn.jsdelivr.net/npm/typesense-instant[email protected]/dist/typesense-instantsearch-adapter.min.js”></script>

<script src=“https://unpkg.com/[email protected]/dist/vue.js”></script>

<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-instantsearch.js”></script>

05:21

A

05:21 AM

i have typesense’s adapter first, then vue, then the vue-instantsearch

Jason

05:23 AM

You’d want to vue-instantsearch imported first

A

05:25 AM

i’ve imported and followed that guide to a T but it says Uncaught SyntaxError: export declarations may only appear at top level of a module

05:26

A

05:26 AM

offending line in question is

05:26

A

05:26 AM

import TypesenseInstantSearchAdapter from “typesense-instantsearch-adapter”;

05:26

A

05:26 AM

i do not want to install vue or any js tooling, just use it as a cdn if that makes sense

Jason

05:27 AM

The import lines are not needed if you’re adding script tags

05:30

Jason

05:30 AM

Hang on there's more vue-specific initialization still needed in your snippet. Let me modify your snippet and post shortly

A

05:37 AM

is it not in the documentation?

Jason

05:39 AM

The documentation assumes the presence of JS tooling and single file components in vue, so it takes a tiny bit of tweaking

05:39

Jason

05:39 AM

Could you try this: https://gist.github.com/jasonbosco/cc160d22cbf069468fbdba43aa8475ba

05:40

Jason

05:40 AM

Key changes I did: removed the script tag on top which was using instantsearch.js specific initialization (which is not needed for vue-instantsearch).

Then searchClient needs to be passed into the ais-instant-search component (Line 9), and for that, searchClient needs to be passed to Vue (Line 44).

A

05:46 AM

okay, that first error is gone

05:46

A

05:46 AM

<div id="app">
  <template>
   <ais-instant-search :search-client="searchClient" index-name="multiple_choice_questions">
      <ais-search-box />
      <ais-hits>
        <div slot="item" slot-scope="{ item }">
          <h2>{{ item.name }}</h2>
        </div>
      </ais-hits>
    </ais-instant-search>
  </template>
</div>

05:46

A

05:46 AM

however, its saying item is undefined

05:47

A

05:47 AM

but the index has been passed in on line 9 which is multiple_choice_questions

05:47

A

05:47 AM

is it not able to detect the items of the index automatically?

Jason

05:48 AM

> its saying item is undefined
Which line is this?

A

05:49 AM

<ais-hits>
        <div slot="item" slot-scope="{ item }">
          <h2>{{ item.name }}</h2>
        </div>
      </ais-hits>

05:50

A

05:50 AM

11-14

Jason

05:50 AM

Is it erroring out on item.name or { item }?

A

05:51 AM

[Vue warn]: Property or method “item” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>)

[Vue warn]: Error in render function: “TypeError: item is undefined” (found in <Root>)

TypeError: item is undefined

05:52

A

05:52 AM

it’s showing new Vue({ as the source of the error :thinking_face:

05:53

A

05:53 AM

how anyone does JS for a living is beyond me

Jason

05:53 AM

Could you try changing <div slot="item"...> to <template slot="item"...

A

05:54 AM

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Error in render function: "TypeError: item is undefined"

05:55

A

05:55 AM

<div id="app">
  <template>
   <ais-instant-search :search-client="searchClient" index-name="multiple_choice_questions">
      <ais-search-box />
      <ais-hits>
        <template slot="item" slot-scope="{ item }">

          <h2>{{ item.name }}</h2>
        </template>
      </ais-hits>
    </ais-instant-search>
  </template>
</div>

Jason

05:56 AM

Ok good, if that had worked, I would have questioned by little understanding of vue!

A

05:56 AM

vue, react, angular, es6, ts (not typesense 😆 ) its all alien to me

05:57

A

05:57 AM

kudos to you guys for building an entire adapter

Jason

05:58 AM

Could you try <h2>@{{ item.name }}</h2>

A

05:59 AM

nope, nothing

05:59

A

05:59 AM

same errors

06:00

A

06:00 AM

Jason

06:00 AM

How about <h2>${item.name}</h2>?

A

06:00 AM

Changes to this

Jason

06:01 AM

Question, what backend framework are you using?

A

06:01 AM

ruby and rails

Jason

06:02 AM

Fellow Ruby fan here!

A

06:02 AM

i love ruby, JS i can’t stand

Jason

06:02 AM

Anyway, that @syntax is apparently needed for when using Laravel, so figured I'd ask

A

06:02 AM

i assumed it would be a few minutes of set up to do a CDN search connected to typesense but here we are