From 9abcff2781bf0075e0936631a3069e8934d4f4de Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Tue, 7 Sep 2021 14:32:46 +0200
Subject: [PATCH 1/5] add sortBy example in playground

---
 package.json                      |  2 +-
 playgrounds/javascript/index.html |  2 +-
 playgrounds/javascript/src/app.js | 29 ++++++++++++-
 playgrounds/react/src/App.js      | 70 ++++++++++++++++++++++++-------
 playgrounds/vue/src/App.vue       | 35 ++++++++++++++--
 yarn.lock                         |  4 +-
 6 files changed, 116 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index ec0b95aa..853fc11f 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "url": "https://github.com/meilisearch/instant-meilisearch.git"
   },
   "dependencies": {
-    "meilisearch": "^0.20.0"
+    "meilisearch": "../meilisearch-js"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
index 547eda71..474a85d1 100644
--- a/playgrounds/javascript/index.html
+++ b/playgrounds/javascript/index.html
@@ -29,7 +29,7 @@ <h2>Search in Steam video games 🎮</h2>
 
       <div class="left-panel">
         <div id="clear-refinements"></div>
-
+        <div id="sort-by"></div>
         <h2>Genres</h2>
         <div id="genres-list"></div>
         <h2>Players</h2>
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
index 739f77c6..78a1283b 100644
--- a/playgrounds/javascript/src/app.js
+++ b/playgrounds/javascript/src/app.js
@@ -3,8 +3,10 @@ import { instantMeiliSearch } from '../../../src/index'
 const search = instantsearch({
   indexName: 'steam-video-games',
   searchClient: instantMeiliSearch(
-    'https://ms-9060336c1f95-106.saas.meili.dev',
-    '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+    // 'https://ms-9060336c1f95-106.saas.meili.dev',
+    // '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+    'http://localhost:7700',
+    'masterKey',
     {
       limitPerRequest: 30,
     }
@@ -12,6 +14,29 @@ const search = instantsearch({
 })
 
 search.addWidgets([
+
+  instantsearch.widgets.sortBy({
+    container: '#sort-by',
+    items: [
+      { value: 'steam-video-games', label: 'Relevant' },
+      {
+        value: 'steam-video-games:recommendationCount:desc',
+        label: 'Most Recommended',
+      },
+      {
+        value: 'steam-video-games:recommendationCount:asc',
+        label: 'Least Recommended',
+      },
+      {
+        value: 'steam-video-games-sort:recommendationCount:asc',
+        label: 'Relevant Least Recommended ',
+      },
+      {
+        value: 'steam-video-games-sort:recommendationCount:desc',
+        label: 'Relevant Most Recommended',
+      },
+    ],
+  }),
   instantsearch.widgets.searchBox({
     container: '#searchbox',
   }),
diff --git a/playgrounds/react/src/App.js b/playgrounds/react/src/App.js
index 5b538aff..a00332e2 100644
--- a/playgrounds/react/src/App.js
+++ b/playgrounds/react/src/App.js
@@ -9,13 +9,18 @@ import {
   ClearRefinements,
   RefinementList,
   Configure,
+  SortBy,
+  Snippet,
 } from 'react-instantsearch-dom'
+
 import './App.css'
 import { instantMeiliSearch } from '../../../src/index'
 
 const searchClient = instantMeiliSearch(
-  'https://ms-9060336c1f95-106.saas.meili.dev',
-  '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+  // 'https://ms-9060336c1f95-106.saas.meili.dev',
+  // '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+  'http://localhost:7700',
+  'masterKey',
   {
     paginationTotalHits: 60,
     primaryKey: 'id',
@@ -39,6 +44,28 @@ const App = () => (
       <Stats />
       <div className="left-panel">
         <ClearRefinements />
+        <SortBy
+          defaultRefinement="steam-video-games"
+          items={[
+            { value: 'steam-video-games', label: 'Relevant' },
+            {
+              value: 'steam-video-games:recommendationCount:desc',
+              label: 'Most Recommended',
+            },
+            {
+              value: 'steam-video-games:recommendationCount:asc',
+              label: 'Least Recommended',
+            },
+            {
+              value: 'steam-video-games-sort:recommendationCount:asc',
+              label: 'Relevant Least Recommended ',
+            },
+            {
+              value: 'steam-video-games-sort:recommendationCount:desc',
+              label: 'Relevant Most Recommended',
+            },
+          ]}
+        />
         <h2>Genres</h2>
         <RefinementList attribute="genres" />
         <h2>Players</h2>
@@ -47,7 +74,11 @@ const App = () => (
         <RefinementList attribute="platforms" />
         <h2>Misc</h2>
         <RefinementList attribute="misc" />
-        <Configure hitsPerPage={6} />
+        <Configure
+          hitsPerPage={6}
+          attributesToSnippet={['description:50']}
+          snippetEllipsisText={'...'}
+        />
       </div>
       <div className="right-panel">
         <SearchBox />
@@ -57,18 +88,27 @@ const App = () => (
   </div>
 )
 
-const Hit = ({ hit }) => (
-  <div key={hit.id}>
-    <div className="hit-name">
-      <Highlight attribute="name" hit={hit} />
-    </div>
-    <img src={hit.image} align="left" alt={hit.name} />
-    <div className="hit-name">
-      <Highlight attribute="description" hit={hit} />
+const Hit = ({ hit }) => {
+  return (
+    <div key={hit.id}>
+      <div className="hit-name">
+        <Highlight attribute="name" hit={hit} />
+      </div>
+      <img src={hit.image} align="left" alt={hit.name} />
+      <div className="hit-name">
+        <Snippet attribute="description" hit={hit} />
+      </div>
+      <div className="hit-info">
+        <b>price:</b> {hit.price}
+      </div>
+      <div className="hit-info">
+        <b>release date:</b> {hit.releaseDate}
+      </div>
+      <div className="hit-info">
+        <b>Recommended:</b> {hit.recommendationCount}
+      </div>
     </div>
-    <div className="hit-info">price: {hit.price}</div>
-    <div className="hit-info">release date: {hit.releaseDate}</div>
-  </div>
-)
+  )
+}
 
 export default App
diff --git a/playgrounds/vue/src/App.vue b/playgrounds/vue/src/App.vue
index 589019c7..12421424 100644
--- a/playgrounds/vue/src/App.vue
+++ b/playgrounds/vue/src/App.vue
@@ -17,6 +17,27 @@
           <ais-clear-refinements>
             <span slot="resetLabel">Clear all filters</span>
           </ais-clear-refinements>
+          <ais-sort-by
+            :items="[
+              { value: 'steam-video-games', label: 'Relevant' },
+              {
+                value: 'steam-video-games:recommendationCount:desc',
+                label: 'Most Recommended',
+              },
+              {
+                value: 'steam-video-games:recommendationCount:asc',
+                label: 'Least Recommended',
+              },
+              {
+                value: 'steam-video-games-sort:recommendationCount:asc',
+                label: 'Relevant Least Recommended ',
+              },
+              {
+                value: 'steam-video-games-sort:recommendationCount:desc',
+                label: 'Relevant Most Recommended',
+              },
+            ]"
+          />
           <h2>Genres</h2>
           <ais-refinement-list attribute="genres" />
           <h2>Players</h2>
@@ -66,12 +87,18 @@ import { instantMeiliSearch } from '../../../src/index'
 export default {
   data() {
     return {
-      searchClient: instantMeiliSearch(
-        'https://ms-9060336c1f95-106.saas.meili.dev',
-        '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
-      ),
+      recommendation: '',
+      searchClient: instantMeiliSearch('http://localhost:7700', 'masterKey'),
     }
   },
+  methods: {
+    order: function (event, searchParameters, refine) {
+      refine({
+        ...searchParameters,
+        sort: this.recommendation,
+      })
+    },
+  },
 }
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index d6ad827a..d1200b90 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5240,10 +5240,8 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-meilisearch@^0.20.0:
+meilisearch@../meilisearch-js:
   version "0.20.0"
-  resolved "https://registry.yarnpkg.com/meilisearch/-/meilisearch-0.20.0.tgz#42899fec7a2ddefcd035e30ed5dd47aa65a6727f"
-  integrity sha512-J+0GIyNVnH6dAM0lmwhWvYFO0Zru5djfbU2bteHIF1gqFP89uPyaOH7oIq5ntZSs/9Z6ogkD2/dLQSLYp4uizg==
   dependencies:
     cross-fetch "^3.1.4"
 

From cc755ccb1f3d87bca74142b9bbd8821706e4de4a Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Wed, 8 Sep 2021 18:51:04 +0200
Subject: [PATCH 2/5] Add tests

---
 cypress/integration/search-ui.spec.js          | 14 ++++++++++++++
 package.json                                   |  1 +
 playgrounds/angular/src/app/app.component.html | 13 +++++++++++++
 playgrounds/javascript/src/app.js              | 10 +---------
 playgrounds/react/src/App.js                   |  8 --------
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/cypress/integration/search-ui.spec.js b/cypress/integration/search-ui.spec.js
index 4bba28aa..ce9300ef 100644
--- a/cypress/integration/search-ui.spec.js
+++ b/cypress/integration/search-ui.spec.js
@@ -42,6 +42,20 @@ describe(`${playground} playground test`, () => {
     cy.get(HIT_ITEM_CLASS).eq(0).contains('9.99 $')
   })
 
+  it('Sort by recommendationCound ascending', () => {
+    const select = `.ais-SortBy-select`
+    cy.get(select).select('steam-video-games:recommendationCount:asc')
+    cy.wait(1000)
+    cy.get(HIT_ITEM_CLASS).eq(0).contains('Rag Doll Kung Fu')
+  })
+
+  it('Sort by default relevancy', () => {
+    const select = `.ais-SortBy-select`
+    cy.get(select).select('steam-video-games')
+    cy.wait(1000)
+    cy.get(HIT_ITEM_CLASS).eq(0).contains('Counter-Strike')
+  })
+
   it('click on facets', () => {
     const checkbox = `.ais-RefinementList-list .ais-RefinementList-checkbox`
     cy.get(checkbox).eq(1).click()
diff --git a/package.json b/package.json
index 853fc11f..76d453c1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "test:e2e:all": "sh scripts/e2e.sh",
     "test:e2e:watch": "concurrently --kill-others -s first \"NODE_ENV=test yarn playground:javascript\" \"cypress open --env playground=javascript\"",
     "test:all": "yarn test:e2e:all && yarn test && test:build",
+    "cy:open": "cypress open",
     "playground:vue": "yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue serve",
     "playground:react": "yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react start",
     "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript start",
diff --git a/playgrounds/angular/src/app/app.component.html b/playgrounds/angular/src/app/app.component.html
index 3ea37be5..60ba01f4 100644
--- a/playgrounds/angular/src/app/app.component.html
+++ b/playgrounds/angular/src/app/app.component.html
@@ -10,6 +10,19 @@ <h1 class="header-title">MeiliSearch + Angular InstantSearch</h1>
     <div class="search-panel">
       <div class="search-panel__filters">
         <ais-clear-refinements></ais-clear-refinements>
+        <ais-sort-by
+          [items]="[
+          { value: 'steam-video-games', label: 'Relevant' },
+          {
+            value: 'steam-video-games:recommendationCount:desc',
+            label: 'Most Recommended'
+          },
+          {
+            value: 'steam-video-games:recommendationCount:asc',
+            label: 'Least Recommended'
+          }
+          ]"
+        ></ais-sort-by>
         <ais-configure [searchParameters]="{ hitsPerPage: 6 }"></ais-configure>
         <h2>Genres</h2>
         <ais-refinement-list attribute="genres" ></ais-refinement-list>
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
index 78a1283b..fb2d93bb 100644
--- a/playgrounds/javascript/src/app.js
+++ b/playgrounds/javascript/src/app.js
@@ -14,7 +14,6 @@ const search = instantsearch({
 })
 
 search.addWidgets([
-
   instantsearch.widgets.sortBy({
     container: '#sort-by',
     items: [
@@ -27,14 +26,6 @@ search.addWidgets([
         value: 'steam-video-games:recommendationCount:asc',
         label: 'Least Recommended',
       },
-      {
-        value: 'steam-video-games-sort:recommendationCount:asc',
-        label: 'Relevant Least Recommended ',
-      },
-      {
-        value: 'steam-video-games-sort:recommendationCount:desc',
-        label: 'Relevant Most Recommended',
-      },
     ],
   }),
   instantsearch.widgets.searchBox({
@@ -57,6 +48,7 @@ search.addWidgets([
   }),
   instantsearch.widgets.configure({
     hitsPerPage: 6,
+    attributesToSnippet: ['description:150'],
   }),
   instantsearch.widgets.refinementList({
     container: '#misc-list',
diff --git a/playgrounds/react/src/App.js b/playgrounds/react/src/App.js
index a00332e2..aa8514a5 100644
--- a/playgrounds/react/src/App.js
+++ b/playgrounds/react/src/App.js
@@ -56,14 +56,6 @@ const App = () => (
               value: 'steam-video-games:recommendationCount:asc',
               label: 'Least Recommended',
             },
-            {
-              value: 'steam-video-games-sort:recommendationCount:asc',
-              label: 'Relevant Least Recommended ',
-            },
-            {
-              value: 'steam-video-games-sort:recommendationCount:desc',
-              label: 'Relevant Most Recommended',
-            },
           ]}
         />
         <h2>Genres</h2>

From 8d95ca053a41ed5f941930da7e4377872d0e07b3 Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Mon, 13 Sep 2021 14:38:18 +0200
Subject: [PATCH 3/5] Add persistent demo URL

---
 playgrounds/angular/src/app/app.component.ts |  4 ++--
 playgrounds/html/public/index.html           |  6 +++---
 playgrounds/javascript/src/app.js            |  6 ++----
 playgrounds/react/src/App.js                 |  6 ++----
 playgrounds/vue/src/App.vue                  | 13 ++++---------
 5 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/playgrounds/angular/src/app/app.component.ts b/playgrounds/angular/src/app/app.component.ts
index 58310951..054ddbad 100644
--- a/playgrounds/angular/src/app/app.component.ts
+++ b/playgrounds/angular/src/app/app.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core'
 import { instantMeiliSearch } from '../../../../src'
 
 const searchClient = instantMeiliSearch(
-  'https://ms-9060336c1f95-106.saas.meili.dev',
-  '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
+  'https://demo-steam.meilisearch.com/',
+  '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
 )
 
 @Component({
diff --git a/playgrounds/html/public/index.html b/playgrounds/html/public/index.html
index 894e4ce1..4e535289 100644
--- a/playgrounds/html/public/index.html
+++ b/playgrounds/html/public/index.html
@@ -25,10 +25,10 @@
       const search = instantsearch({
           indexName: "steam-video-games",
           searchClient: instantMeiliSearch(
-            'https://ms-9060336c1f95-106.saas.meili.dev',
-            '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+            'https://demo-steam.meilisearch.com',
+            '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
           )
-          });
+      });
       search.addWidgets([
         instantsearch.widgets.searchBox({
             container: "#searchbox",
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
index fb2d93bb..0d3714eb 100644
--- a/playgrounds/javascript/src/app.js
+++ b/playgrounds/javascript/src/app.js
@@ -3,10 +3,8 @@ import { instantMeiliSearch } from '../../../src/index'
 const search = instantsearch({
   indexName: 'steam-video-games',
   searchClient: instantMeiliSearch(
-    // 'https://ms-9060336c1f95-106.saas.meili.dev',
-    // '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
-    'http://localhost:7700',
-    'masterKey',
+    'https://demo-steam.meilisearch.com',
+    '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
     {
       limitPerRequest: 30,
     }
diff --git a/playgrounds/react/src/App.js b/playgrounds/react/src/App.js
index aa8514a5..0d5cd59e 100644
--- a/playgrounds/react/src/App.js
+++ b/playgrounds/react/src/App.js
@@ -17,10 +17,8 @@ import './App.css'
 import { instantMeiliSearch } from '../../../src/index'
 
 const searchClient = instantMeiliSearch(
-  // 'https://ms-9060336c1f95-106.saas.meili.dev',
-  // '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
-  'http://localhost:7700',
-  'masterKey',
+  'https://demo-steam.meilisearch.com/',
+  '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
   {
     paginationTotalHits: 60,
     primaryKey: 'id',
diff --git a/playgrounds/vue/src/App.vue b/playgrounds/vue/src/App.vue
index 12421424..6bb28099 100644
--- a/playgrounds/vue/src/App.vue
+++ b/playgrounds/vue/src/App.vue
@@ -28,14 +28,6 @@
                 value: 'steam-video-games:recommendationCount:asc',
                 label: 'Least Recommended',
               },
-              {
-                value: 'steam-video-games-sort:recommendationCount:asc',
-                label: 'Relevant Least Recommended ',
-              },
-              {
-                value: 'steam-video-games-sort:recommendationCount:desc',
-                label: 'Relevant Most Recommended',
-              },
             ]"
           />
           <h2>Genres</h2>
@@ -88,7 +80,10 @@ export default {
   data() {
     return {
       recommendation: '',
-      searchClient: instantMeiliSearch('http://localhost:7700', 'masterKey'),
+      searchClient: instantMeiliSearch(
+        'https://demo-steam.meilisearch.com',
+        '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
+      ),
     }
   },
   methods: {

From 6ff6ed9af123976977a0b4830237b2d31679f274 Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Mon, 13 Sep 2021 14:42:09 +0200
Subject: [PATCH 4/5] Remove temporary meilisearch pkg link

---
 package.json | 2 +-
 yarn.lock    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 76d453c1..080e855e 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "url": "https://github.com/meilisearch/instant-meilisearch.git"
   },
   "dependencies": {
-    "meilisearch": "../meilisearch-js"
+    "meilisearch": "^0.20.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
diff --git a/yarn.lock b/yarn.lock
index d1200b90..d6ad827a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5240,8 +5240,10 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-meilisearch@../meilisearch-js:
+meilisearch@^0.20.0:
   version "0.20.0"
+  resolved "https://registry.yarnpkg.com/meilisearch/-/meilisearch-0.20.0.tgz#42899fec7a2ddefcd035e30ed5dd47aa65a6727f"
+  integrity sha512-J+0GIyNVnH6dAM0lmwhWvYFO0Zru5djfbU2bteHIF1gqFP89uPyaOH7oIq5ntZSs/9Z6ogkD2/dLQSLYp4uizg==
   dependencies:
     cross-fetch "^3.1.4"
 

From 2bc2a13471bcc70f0123d337a930f71bfa37dfa3 Mon Sep 17 00:00:00 2001
From: Charlotte Vermandel <charlottevermandel@gmail.com>
Date: Mon, 13 Sep 2021 14:49:41 +0200
Subject: [PATCH 5/5] Add recommendation count in playgrounds

---
 playgrounds/angular/src/app/app.component.html | 5 +++--
 playgrounds/javascript/src/app.js              | 1 +
 playgrounds/vue/src/App.vue                    | 7 +++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/playgrounds/angular/src/app/app.component.html b/playgrounds/angular/src/app/app.component.html
index 60ba01f4..4f62caa7 100644
--- a/playgrounds/angular/src/app/app.component.html
+++ b/playgrounds/angular/src/app/app.component.html
@@ -53,8 +53,9 @@ <h2>Misc</h2>
                 <div class="hit-description">
                   <ais-highlight attribute="description" [hit]="hit"></ais-highlight>
                 </div>
-                <div class="hit-info">${{hit.price}}</div>
-                <div class="hit-info">{{hit.releaseDate}}</div>
+                <div class="hit-info">price: ${{hit.price}}</div>
+                <div class="hit-info">Release date: {{hit.releaseDate}}</div>
+                <div class="hit-info">Recommendation: {{hit.recommendationCount}}</div>
               </li>
             </ol>
           </ng-template>
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
index 0d3714eb..9d01f27f 100644
--- a/playgrounds/javascript/src/app.js
+++ b/playgrounds/javascript/src/app.js
@@ -66,6 +66,7 @@ search.addWidgets([
           </div>
           <div class="hit-info">price: {{price}}</div>
           <div class="hit-info">release date: {{releaseDate}}</div>
+          <div class="hit-info">Recommendation: {{recommendationCount}}</div>
         </div>
       `,
     },
diff --git a/playgrounds/vue/src/App.vue b/playgrounds/vue/src/App.vue
index 6bb28099..949fa0ac 100644
--- a/playgrounds/vue/src/App.vue
+++ b/playgrounds/vue/src/App.vue
@@ -53,8 +53,11 @@
                 <div class="hit-description">
                   <ais-snippet :hit="item" attribute="description" />
                 </div>
-                <div class="hit-info">price: {{ item.price }}</div>
-                <div class="hit-info">release date: {{ item.releaseDate }}</div>
+                <div class="hit-info">Price: {{ item.price }}</div>
+                <div class="hit-info">Release date: {{ item.releaseDate }}</div>
+                <div class="hit-info">
+                  Recommended: {{ item.recommendationCount }}
+                </div>
               </div>
             </template>
           </ais-hits>