meilisearch / meilisearch-vue Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://www.meilisearch.com/
License: MIT License
Home Page: https://www.meilisearch.com/
License: MIT License
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
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 belowThe 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>
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",
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.
Environment (please complete the following information):
I have the following resource ids available as an array that I want to use as a refinement:
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:
http://url.com/resources?toggle[id]=true
so you can't know what refinement is currently active:on="[]"
, the refinement is considered activecurrent-refinements
component can't distinct between 2 different refinements since they use the same attributeIs there a better way to implement multiple refinements by the same attribute with a known list of values?
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.
Related to meilisearch/integration-guides#185
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:
.code-samples.meilisearch.yml
landing_getting_started_1
code samplesThe 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.
Hi
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.
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
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.
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"})
The gifs sizes should be reduced to be around 1MB each. They should still showcase approximatively the same content.
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
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
The demos section of the README might be out of date
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.
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:
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!
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.
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!
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.
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
<!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>
<!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>
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
I'll create a GitHub action for next years.
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.
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
Expected behavior
Plugin should be a function or have an install
function
Current behavior
Not behaves as a Vue plugin
Environment:
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):
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.