https://typesense.org logo
Join Slack
Powered by
trying to set up typesense with the cdn vuejs impl...
# community-help
a
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
j
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
Does the order of imports matter?
i have typesense’s adapter first, then vue, then the vue-instantsearch
j
You’d want to vue-instantsearch imported first
a
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
offending line in question is
import TypesenseInstantSearchAdapter from “typesense-instantsearch-adapter”;
i do not want to install vue or any js tooling, just use it as a cdn if that makes sense
j
The import lines are not needed if you’re adding script tags
Hang on there's more vue-specific initialization still needed in your snippet. Let me modify your snippet and post shortly
a
is it not in the documentation?
j
The documentation assumes the presence of JS tooling and single file components in vue, so it takes a tiny bit of tweaking
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
okay, that first error is gone
Copy code
<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>
however, its saying item is undefined
but the index has been passed in on line 9 which is multiple_choice_questions
is it not able to detect the items of the index automatically?
j
its saying item is undefined
Which line is this?
a
Copy code
<ais-hits>
        <div slot="item" slot-scope="{ item }">
          <h2>{{ item.name }}</h2>
        </div>
      </ais-hits>
11-14
j
Is it erroring out on 
item.name
or 
{ item }
?
a
[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
it’s showing 
new Vue({
as the source of the error 🤔
how anyone does JS for a living is beyond me
😂 1
j
Could you try changing 
<div slot="item"...>
to 
<template slot="item"...
a
[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"
Copy code
<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>
j
Ok good, if that had worked, I would have questioned by little understanding of vue!
a
vue, react, angular, es6, ts (not typesense 😆 ) its all alien to me
kudos to you guys for building an entire adapter
🙏 1
j
Could you try 
<h2>@{{ item.name }}</h2>
a
nope, nothing
same errors
message has been deleted
j
How about 
<h2>${item.name}</h2>
?
a
Changes to this
j
Question, what backend framework are you using?
a
ruby and rails
🙌 1
j
Fellow Ruby fan here!
a
i love ruby, JS i can’t stand
i assumed it would be a few minutes of set up to do a CDN search connected to typesense but here we are
j
Anyway, that @syntax is apparently needed for when using Laravel, so figured I'd ask
a
because i have a typesense cluster
i have the api keys and whatnot
its just crying about 
item
whatever that is
i currently have a 10k LOC JS file for each typesense index i want to search - its disgusting but works
if this item thing gets resolved i can delete 60k LOC from my app lol
j
Oh wow!
Something about the script tag way of initializing things is what's messing things up...
a
is it the order of scripts?
or do i need to double check the naming of the key/values in the index
part of my schema schema = { ‘name’ => ‘multiple_choice_questions’, ‘fields’ => [ { ‘name’ => ‘id’, ‘type’ => ‘string’ }, { ‘name’ => ‘question’, ‘type’ => ‘string’ }, { ‘name’ => ‘tags’, ‘type’ => ‘string’ },
j
This is a vue / vue-instantsearch thing... Not related to the backend
a
yeah i figured. definitely clueless on this
j
Although, you'd want it it to be {{ item.question }}, since there's 
name
in your documents...
Copy code
new Vue({
    el: '#app',
    data: {
      searchClient: typesenseInstantsearchAdapter.searchClient,
      item: {}
    }
  })
Could you try that ^
a
no change
same error as last time
“did you register the component correctly?”
j
Oh let's revert back to {{ }} syntax
In addition to adding item: {} to data
a
this is what i have
and the current error is saying “did you register the component?”
j
Oh wait, 
vue-instantsearch@0.2/dist/vue-instantsearch.js
- that's a really old version of vue-instantsearch!
Latest is 3.7.0
a
that did this..
replacing 0.2 with 3.7.0
nice eye, completely failed to see that
j
Ok progress!
Could you upgrade to vue 2.6.14 for good measure?
a
it worked!
its showing
j
🎉 🎉
a
thank you soooo much man
deeply appreciate it
you have a loyal customer in me
j
Happy to help! :D
Btw, could you post your original snippet/question in Github issues? I'd like to add my response publicly for others who might stumble into this
a
yes, can you send me the link or repo in which to post it?
j
Thank you!
Open in Slack
PreviousNext
Powered by