MeiliSearch Integration with Nuxt.js

[sonukumar141]

Hi, I am trying to use MeiliSearch in my app which is written in Nuxt.js. I have downloaded the meilisearch project from github and running it on 127.0.0.1:7700 as per the document. I have also imported the javascript sdk 'meilisearch' as per the document.

Can anyone guide me use it properly in my app. I have written below code in my vue compoent. import MeiliSearch from 'meilisearch'; // For importing the sdk

// I have written Below function for getting the search results // NOTE: I created index and then commented it so that I can use the index async meiliSearch() { var client = new MeiliSearch({host: 'http://127.0.0.1:7700', apiKey: 'master-key'}); // const index = await client.createIndex({ uid: 'books' }); const index = client.getIndex('books'); const documents = [ { book_id: 123, title: 'Pride and Prejudice' }, { book_id: 456, title: 'Le Petit Prince' }, { book_id: 1, title: 'Alice In Wonderland' }, { book_id: 1344, title: 'The Hobbit' }, { book_id: 4, title: 'Harry Potter and the Half-Blood Prince' }, { book_id: 42, title: "The Hitchhiker's Guide to the Galaxy" }, ]

     let response = await index.addDocuments(documents)
     console.log("My Response"+response) // => { "updateId": 0 }

      const search = await index.search('harry pottre')
      console.log("Here is Meili Search" + search)
},

When i am calling this function I get [Object, Object] in my console.log

[bidoubiwa]

Hey sonukumar141.

It is because index.search("xxx") returns an object. The object looks like this :

{
  "hits": [
    {
      "id": "2770",
      "title": "American Pie 2",
      "poster": "https://image.tmdb.org/t/p/w1280/q4LNgUnRfltxzp3gf1MAGiK5LhV.jpg",
      "overview": "The whole gang are back and as close as ever. They decide to
      get even closer by spending the summer together at a beach house. They
      decide to hold the biggest...",
      "release_date": 997405200
    },
    {
      "id": "190859",
      "title": "American Sniper",
      "poster": "https://image.tmdb.org/t/p/w1280/svPHnYE7N5NAGO49dBmRhq0vDQ3.jpg",
      "overview": "U.S. Navy SEAL Chris Kyle takes his sole mission—protect his
      comrades—to heart and becomes one of the most lethal snipers in American
      history. His pinpoint accuracy not only saves countless lives but also
      makes him a prime...",
      "release_date": 1418256000
    },
    ...
  ],
  "offset": 0,
  "limit": 20,
  "nbHits": 976,
  "exhaustiveNbHits": false,
  "processingTimeMs": 35,
  "query": "american "
}

In your example your are transforming the object in a string which output: [Object, Object].

Could you try the following:

 console.log("Here is Meili Search", search)

For more information on the hits:

search.hits.map(hit => console.log(hit))