meilisearch / meilisearch-vue Goto Github PK

View Code? Open in Web Editor NEW

147.0 147.0 12.0 15.53 MB

Home Page: https://www.meilisearch.com/

License: MIT License

client instantsearch meilisearch vue

meilisearch-vue's People

Stargazers

Watchers

Forkers

simon-clematide danqiubore suryatmodulus mironcat dichotommy amit-ksh curtsheller daylyt247 beocaca kantum sthagen

meilisearch-vue's Issues

Refine by specific attribute values

I have the following resource ids available as an array that I want to use as a refinement:

Favorited resource ids: [1, 2, 3, 4]
Resource ids you can create: [3, 4, 5, 6, 7]

I'm currently using toggle-refinement component in the following way:

// Toggle favorites
<ais-toggle-refinement attribute="id" :on="[1, 2, 3, 4]"></ais-toggle-refinement>
// Toggle create
<ais-toggle-refinement attribute="id" :on="[3, 4, 5, 6, 7]"></ais-toggle-refinement>

This solution kinda works, but the issue is:

Routing is always added as: http://url.com/resources?toggle[id]=true so you can't know what refinement is currently active
If the array of attribute values is empty, ex: :on="[]", the refinement is considered active
The current-refinements component can't distinct between 2 different refinements since they use the same attribute

Is there a better way to implement multiple refinements by the same attribute with a known list of values?

Make a Vue3 compatibility example

I'm trying to showcase an example on how to work with Vue 3. Unfortunately I'm not able to make it work. The following example is based on the quick start guide of Meilisearch.

The following code is where I stopped. The error throwns are as follow:

vue.global.js:1568 [Vue warn]: A plugin must either be a function or an object with an "install" function.
Ht @ vue.global.js:1568
use @ vue.global.js:5308
(anonymous) @ (index):35
vue.global.js:1568 [Vue warn]: Failed to resolve component: ais-search-box
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>
// etc etc

Vue 3

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>

<body>
  <div id="app" class="wrapper">
    <ais-instant-search :search-client="searchClient" index-name="movies">
      <ais-configure :hits-per-page.camel="10" />
      <ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
      <ais-hits>
        <div slot="item" slot-scope="{ item }">
          <ais-highlight :hit="item" attribute="title" />
        </div>
      </ais-hits>
    </ais-instant-search>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue3/umd/index.js"></script>
<script
  src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        searchClient: instantMeiliSearch('http://127.0.0.1:7700')
      }
    }
  })
  app.use(VueInstantSearch);
  app.mount("#app")
</script>

</html>

Working Vue 2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
</head>

<body>
  <div id="app" class="wrapper">
    <ais-instant-search :search-client="searchClient" index-name="movies">
      <ais-configure :hits-per-page.camel="10" />
      <ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
      <ais-hits>
        <div slot="item" slot-scope="{ item }">
          <ais-highlight :hit="item" attribute="title" />
        </div>
      </ais-hits>
    </ais-instant-search>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue2/umd/index.js"></script>
<script
  src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script>
  Vue.use(VueInstantSearch)
  var app = new Vue({
    el: '#app',
    data: {
      searchClient: instantMeiliSearch('http://127.0.0.1:7700')
    }
  })
</script>

</html>

ais-range-input is not working with meilisearch.

The min and max values of the range filter are always 0. I suppose it is wokring like this because Aloglia uses facets for this input while Meilisearch - filters. If I create a custom component, it won't work with the routing system.

Vue not found in 'vue' Laravel 8.12 with Laravel Jetstream 2.2 and Inertia vue3 0.35

Hey, I am using meilisearch in my laravel jetstream project and installed meilisearch instantsearch as documented. I saw that your documentation is another syntax than possible in Vue3, mine looks like that:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import InstantSearch from "vue-instantsearch/src/components/InstantSearch";

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InstantSearch)
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

Thats the default for Jetstream Projects using Inertia. Now I get

WARNING in ./node_modules/vue-instantsearch/src/util/createInstantSearchComponent.js 41:47-58
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Te
xt, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compile, computed, createApp, createB
lock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, d
efineAsyncComponent, defineComponent, defineEmit, defineProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, initCustomF
ormatter, inject, isProxy, isReactive, isReadonly, isRef, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpda
te, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushS
copeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDyna
micComponent, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, s
srUtils, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useContext, useCssModule, useCssVars, useS
SRContext, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withCtx, wit
hDirectives, withKeys, withModifiers, withScopeId)

WARNING in ./node_modules/vue-instantsearch/src/util/createInstantSearchComponent.js 42:61-68
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

It still compiles and works, but maybe someone wants to look into that.

Search Issue - Unable to type fast [VUE JS]

When i try to type fast, it would automatically snapback and cancel my typing and replace the text with what the server respond with. I'm not sure where to look into as my configuration are almost identical to the demo located here
https://codesandbox.io/s/ms-vue-is-1d6bi?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.vue

I don't have other JS files, so i don't think it's conflicting with others. I've tried disabling my alphine.js which i usefor tailwind ui stack but still face the same issue.

bug.mov

app.js

window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
import Vue from "vue";
import InstantSearch from "vue-instantsearch";

Vue.use(InstantSearch);
Vue.config.productionTip = false;

const app = new Vue({
    el: '#app',
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "autoprefixer": "^10.2.5",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.19",
        "postcss": "^8.2.12",
        "postcss-purgecss-laravel": "^2.0.0",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^2.1.2",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.8",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@meilisearch/instant-meilisearch": "0.6.0",
        "@tailwindcss/aspect-ratio": "^0.2.0",
        "@tailwindcss/forms": "^0.3.2",
        "alpinejs": "^2.8.2",
        "vue-instantsearch": "4.0.0",
        "instantsearch.css": "7.4.2"
    }
}

NPM install

npm WARN [email protected] requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of algoliasearch@>= 3.1 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of algoliasearch@>= 3.32.0 < 5 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@types/browser-sync/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm64"})

Passing query to ais-configure doesnt work.

Description
Hello guys! Im new to meli search and angolia, but seems like i cannot pass search query to meli search cloud provider via ais-configure query.

Im tryed to pass it via query atttribute, and a q attribute like meli search documentation said, but there is no query parameter in cloud response.

Can you tell what i am doing wrong or its a bug, related to algolia or other packages?

Expected behavior
Passing query as prop to ais configure leads to return of items filtered by that value.

Current behavior
Query doesnt passed to request.

Minimal reproduction example
https://stackblitz.com/edit/vue-gjznih?file=src%2FApp.vue,src%2Fmain.js

Screenshots or Logs
If applicable, add screenshots or logs to help explain your problem.

Environment (please complete the following information):

OS: Windows 11
Browser: Chrome 121.0.6167.139
Meilisearch version: Im using cloud.
instant-meilisearch version: ^0.14.0,
vue-instantsearch version: ^4.13.2,
Vue.js version: [email protected]

Add Typescript support

It'd be nice if we can use Typescript with this package for type safety. Currently, there are no type declaration files and the Typescript compiler throws errors because the plugin implicitly has any type.

Problem with ais-range-slider FACET STATS

Hi everyone,

I tried using an example that works well like vue-instantsearch
from official doc https://www.algolia.com but it didn't work !!!
Mainly the problem is due "RANGE" value from the slot, always 0 {range.min AND range.max} !
the minimum and maximum value is not automatically computed by Algolia from the data in the index.

<ais-instant-search :search-client="searchClient" index-name="NAME_OF_INDEX">


<ais-range-input attribute="area">
  <template v-slot="{ currentRefinement, range, refine, canRefine }">     
   <label>Area Range</label>     
    <vue-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          :disabled="!canRefine"
          :lazy="true"
          :useKeyboard="true"
          :enableCross="false"
          tooltip="always"
          :duration="0"
          @change="refine({ min: $event[0], max: $event[1] })">
    </vue-slider>
  </template>
</ais-range-input>


</ais-instant-search>

BUT
Trying to use :min="0" :max="100" inside it work ≈ But the problem is that I can't retrieve any record >= to :max="100" !!!

<ais-range-input attribute="area" :min="0" :max="100">
  <template v-slot="{ currentRefinement, range, refine, canRefine }">     
   <label>Area Range</label>     
    <vue-slider
          :min="range.min"
          :max="range.max"
          :value="toValue(currentRefinement, range)"
          :disabled="!canRefine"
          :lazy="true"
          :useKeyboard="true"
          :enableCross="false"
          tooltip="always"
          :duration="0"
          @change="refine({ min: $event[0], max: $event[1] })">
    </vue-slider>
  </template>
</ais-range-input>


</ais-instant-search>

methods:{

toValue(value, range) {
console.log(value,range)
           return [
               typeof value.min === "number" ? value.min : range.min,
               typeof value.max === "number" ? value.max : range.max,
           ];
       },
}

console.log(value)
    max: undefined
    min: undefined
=======================
console.log(range)
    max: 0
    min: 0

**Environment
"Laravel 8 scout",
"Vue": "^2.6.12",
"Vue-slider-component": "^3.2.20",
"@meilisearch/instant-meilisearch": "^0.7.1", AS DRIVER OF SCOUT
"algolia/algoliasearch-client-php": "^3.3",

Errors not caught when the data isn't present

I used the codeandbox demo, and I pointed the demo to my own MeiliSearch instance (changed the URL and token in the instance creation in Vue.js).

I don't have the data, so the demo doesn't work obviously, but it doesn't fail gracefully. It would be nice to catch this so those error aren't return to the user, but also maybe displaying a "please add the data to your instance by doing XYZ".

The 7 errors after the first one are the KeyEventHandler one. I'm using latest version of Brave on latest version of macOS.

Change master branch to main

Let's be allies and make this change that means a lot.

Here is a blog post that explain a little more why it's important, and how to easily do it. It will be a bit more complicated with automation, but we still should do it!

Use search results in ais-instant-search

Hello all,

Currently I have a filter in my ais-instant-search defined as follows:

<template>
<ais-instant-search :search-client="searchClient" index-name="products">

{{ This-Is-Where-I-Want-Access-To-Search-Results }} 

<div id="brands-filter" v-if="????">
<h3 class="catalog-category font-semibold mb-1">Brands:</h3>
     <div>
           <ais-refinement-list operator="or" attribute="brand" :limit="5" :show-more="true" >
                 <template></template>
           </ais-refinement-list>
    </div>                                       
</div>

..........

What I want to do is hide the div with id brands-filter based on the search results returned.
So if no brands are returned at all in FacetsDistribution this entire div can be hidden.
To be able to do this I need access to the search results, however, I do not seem to able
to retrieve the search results in such a way that I can fill the v-if in the sample above.

Any suggestions about how I can access the search results would be really helpful!

Cheers!

Example not Working

I followed the example but seems like some form of compatibility issues with MeiliSearchApiError: Json deserialize error: unknown field highlightPreTag , cropMarker

i think because the examples are running on v0.26 servers

Demo in codesandbox isn't working

When you open the Nobel Prize Winners example with codesandbox, it opens with an error. I tried on macOS 11.01 build 20B29 in Google Chrome 87.0.4280.67 & Brave Browser 87.1.17.73

ais-refinement-list display data to the user

Description
I'm using ais-refinement-list to show the facets but the problem here is that the keys are objects on meilisearch server for example key called brand is the object and has 2 keys display_name and slug I want to make meilisearch-vue show the display_name but when filter use the slug

Basic example
<ais-refinement-list attribute="brand.slug" /> I want to show the brand name not the slug to the user

Update code sand box links once changed

Related to #23

Once the pr is merged a new codesandbox will be created linked to these sub-folders. The links will have to be updated accordingly in this repo but also in meilisearch/instant-meilisearch

Remove nobel-prize demo

Shouldn't we remove the folder containing the nobel-prizes demo? It's maintained by the devrel team here, we should avoid code duplication and put a link to this repo in the README instead.

The CIs and dependabot should be removed as well

Example of sorting

Hi, I'm using the instant-search widget for my search and would like to add a default sorting to it. Can't find any resources how it can be done in Vue, an example will be greatly appreciated

CDN vue-instantsearch plugin does not have the `install` function

Description
VueInstantSearch for Vue3 does not behave as a Vue plugin since it is not a function or has an install function.
For making, it works properly, additional steps are to be taken as mentioned in the quick start code

Sample Code

Go to https://codepen.io/amit-ksh/pen/jOvMEEw
See the warnings in the console

Expected behavior
Plugin should be a function or have an install function

Current behavior
Not behaves as a Vue plugin

Environment:

vue-instantsearch version: 4.5.0
Vue.js version: 3.0.0

Update gifs in nobel prizes to be less tham 7mb

Task

The gifs sizes should be reduced to be around 1MB each. They should still showcase approximatively the same content.

Reason

We want to remove the size of the gifs in order to link this repository to a codesandbox By doing so we avoid maintaining the
code in two different places

It would also avoid heavy load time and download time for users that comes to see the readme in this repository

Add Vue 3 sample to getting started code sample

The getting_started_front_end_integration_md code sample is currently only compatible with Vue 2. We should also provide code accomplishing the same thing that works with Vue 3. This code can be added within the same sample, above or below the current content.

Add 2021 to license year

I'll create a GitHub action for next years.

ais-sort-by is not working as expected

ais-sort-by's refine method works by generating a URL with the index containing the sort. This is because unlike Meilisearch, Algolia's sorting functionallity is working by creating a different index with the data sorted in a desired way.

So, for example if I call refine with price:asc, as described in the documentation of Meilisearch like this: refine('price:desc'), the URL will be http://127.0.0.1:7700/indexes/price/search with post parameter sort: ['desc'].

Expected behaviour:

URL: http://127.0.0.1:7700/indexes/products/search (because my index is 'products');
Post parameter: sort: ['price:desc']

Update .code-samples.meilisearch.yaml

⚠️ This issue is generated, it means the examples and the namings do not necessarily correspond to the language of this repository.
Also, if you are a maintainer, feel free to add any clarification and instruction about this issue.

Sorry if this is already partially/completely implemented, feel free to let me know about the state of this issue in the repo.

Since there is no code-samples in this repository, you should add a new file .code-samples.meilisearch.yml into the root of this directory, and add a new key containing the landing_getting_started_1 contents.
Check out the #185 issue (Add landing_getting_started_1 code samples section) for more information

TODO:

Add new file .code-samples.meilisearch.yml
Add landing_getting_started_1 code samples

Vue widget geosearch leaflet map

Hi 👋

It’s possible to add geosearch widget with meilisearch instance using vue like this example ?

https://codesandbox.io/embed/6c96p?file=/src/index.js&codemirror=1

Support for ais-numeric-menu?

Hi!

I'm trying to figure out if the ais-numeric-menu Vue component is supported or not.

Below I have the following search box, but somehow the ais-numeric-menu component doesn't seem to apply anything to the search request to Meilisearch. The request only sends attributesToHighlight, facetsDistribution, filters, limit and q.

filters is something I have manually set in the ais-configure component to debug, see attached screenshot below

The numeric refinements are applied to the "state", but they are not applied to the search request.
Is it not supported or am I doing something wrong?

Looking forward to hear your thoughts :)

Vue markup:

<ais-instant-search :search-client="searchClient" index-name="movies">
    <ais-configure :filters="'release_date > 795484800'"/>
    <ais-search-box placeholder="Søg efter produkter..." show-loading-indicator/>
    <ais-state-results>
      <template slot-scope="{ state, results: { hits, query }}">
        <div v-if="hits.length > 0 && query.length > 0" style="display:flex;">
          <code>
            <pre>
                {{ JSON.stringify(state, null, 4) }}
            </pre>
        </code>
          <ais-refinement-list attribute="genres" :sortBy="sortBySettings"
            style="background-color: #ccc;padding: 1rem 1.5rem;margin-right:1rem">
            <p slot="item" slot-scope="{ item, refine }" :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
              @click.prevent="refine(item.value)">
              <ais-highlight attribute="item" :hit="item" />
              ({{ item.count.toLocaleString() }})
            </p>
          </ais-refinement-list>
          <ais-numeric-menu attribute="release_date" :items="dateRanges" />
          <ais-hits>
            <div slot="item" slot-scope="{ item }" style="clear:both;padding: 1rem 0">
              <img :src="item.poster" alt="" style="width:50px;float:left">
              <div style="margin-left: 60px">
                <p v-text="item.title"></p>
                <p v-text="item.overview"></p>
              </div>
            </div>
          </ais-hits>
        </div>
        <div v-if="hits.length == 0 && query">
          No results
        </div>
        <div v-else>
          <!-- Do not display anything when query.length == 0 -->
        </div>
      </template>
    </ais-state-results>
  </ais-instant-search>

Screenshot of search box and network request:

To use meilisearch-vue in a demo project

I tried to use meilisearch-vue in a demo project

https://github.com/anborg/vue3-demo/blob/master/src/components/MeiliSearch.vue

However, the search box is not visible. Perhaps I'm missing something? Help is much appreciated.

The meilisearch component was imported to App.vue.

Broken link on README

The demos section of the README might be out of date

Problems with search, letters disappear

Description
When searching the first word, some letters disappear because of the high latency or big payload, is there a way of using a custom debouncer ? Or decrease the frequency of requests between typing letters.

Screenshots or Logs