I'm using the Quasar Framework and installed vue-fuse correctly with npm.

Getting this error message after running "npm run dev":

error in ./~/vue-fuse/src/VueFuse.vue

Module build failed: Error: Couldn't find preset "env" relative to directory "D:\Documenten\My Web Sites\Quasar-Paperasse\node_modules\vue-fuse"
at D:\Documenten\My Web Sites\Quasar-Paperasse\node_modules\babel-core\lib\transformation\file\options\option
-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (D:\Documenten\My Web Sites\Quasar-aperasse\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
.....

Hello,

I can see that you list Vue 3 as a compatible version but the package.json locks the dependency at Vue 2.x.
Is there any other repo?

vue-fuse.es.js is not importing properties correctly

`./node_modules/vue-fuse/dist/vue-fuse.es.js`
...
import { ref, computed, watch } from "vue";
...

 warning  in ./node_modules/vue-fuse/dist/vue-fuse.es.js
"export 'computed' was not found in 'vue'

 warning  in ./node_modules/vue-fuse/dist/vue-fuse.es.js
"export 'ref' was not found in 'vue'

 warning  in ./node_modules/vue-fuse/dist/vue-fuse.es.js
"export 'watch' was not found in 'vue'

it works if i change 'vue' on 'vue-demi' manually in node_modules folder

what do I do?

I'm trying to bind my state to the fuse component value: I can filter my list, but if I select another category, I need to reset the search. So I tried to bind the value:

<vue-fuse :search="search" :defaultAll="false" :keys="['key']" :list="items"/>

with my computed property:

computed: {
  ...mapState(['search'])
}

when the route changes:

router.afterEach(function(to, from, next) {
  store.state.search = ''
}

(The code is stripped to the bare minimum). Looks like the new search value is actually used (the list is back to its original state) but the value of the input doesn't change.

Looks like search isn't a prop in your component so I may be cheating a bit here... But I think it would be an interesting feature. Any way to do that?

I also tried to use the $search method but without success, plus it would be kind of dirty to do that at router-level...

Thanks.

Edit: Current workaround:

computed: {
  search() {
    const search = this.$store.state.search
    const input = document.querySelector('[type="search"]')
    if (input) input.value = search
    return search
  }
}

Issue related to: #82

When using server-side Nuxt.js with:

mode: 'universal'
target: 'server'

with component registration:

<script>
import VueFuse from 'vue-fuse'

export default {
  components: {
    VueFuse,
  },
}
</script>

I get the syntax error "Unexpected token '<'"

The problem seems to be associated with SSR. Tried out rendering only client-side:

mode: 'spa'
target: 'static'

and this strangely works. Any reason why target: 'server' seems to break and what we can do about it?

Can we have a changelog? whats changed from v1.5.2 vs v2.0.2? A major version change to me indicates breaking changes, so I havent upgraded yet because Im not sure of the potential breaking changes.

Hey,
Thanks for this really nice package.
Would you be OK if I make a PR with style/class props on input ?

I didn't see it listed in the instructions so wanted to post and see if this is the correct way to solve the issue i ran into.

Following the setup instructions on the site i got

ERROR  Failed to compile with 1 errors 

 error  in ./node_modules/vue-fuse/src/VueFuse.vue

Module build failed: Error: Couldn't find preset "stage-2" relative to directory

this was solved by adding npm install --save-dev babel-preset-stage-2

Is this expected behavior? or am i doing something wrong?

Thanks in advance,
Jeff

Right now, when the defaultAll option is false, you can't tell whether a search hasn't found any items or there was no search at all (input is blank).
I think it would be quite convenient to get the current search input state via v-model prop on the vue-fuse component like this:

 <vue-fuse
              ...
              :defaultAll="false"
              v-model="inputState"></vue-fuse>

Alternatively, this data could also be a part of search updated event arguments, along with the search results.

P.S. Thank you for your work! vue-fuse really is a helpful fine component

The issue is that I can't seem to change at least keys and shouldSort after vue-fuse is mounted. Or maybe I'm just doing it wrong.

Overall I don't think this is a big issue. The biggest pain I had was when I needed to change shouldSort when the search input was focused (a very convoluted thing, not important...). Because I then had to re-render vue-fuse to give it the new setting, the search input focus would obviously be lost and I had to steal back the focus. It worked, but it just felt like a super roundabout way to do it. Otherwise, I didn't really have any issues re-rendering vue-fuse.

list seems to update just fine but for seemingly everything else I need to re-render the component to apply the new settings.

Here's a codesandbox example where I'm changing keys (doesn't work without re-render) and list (no need to re-render).

A here's a smaller example:

<VueFuse v-if="searchEnabled" :shouldSort="shouldSort">

<label>
  <input type="checkbox" v-model="shouldSort" @change="updateSearch()" />
  should sort
</label>

data: function() {
  return {
    searchEnabled: true,
	shouldSort: true,
  }
},
methods: {
  updateSearch: function () {
    this.searchEnabled = false;
    this.$nextTick(() => {
      this.searchEnabled = true;
    });
  },
},

Hi,
So if we have an array of objects and search for them, VueFuse returns the objects that match the criteria.
But if said objects have an array of children which we want to search, is it possible to filter those to the search criteria as well?

Examples:

[
	{
		label: 'parent123',
	},
	{
		label: 'parent321',
	}.
]

If we search for parent123 we will get:

[
	{
		label: 'parent123',
	}
]

But if it's a group with children:

[
	{
		label: 'parent123',
		children: [
			{
				label: 'child1'
			},
			{
				label: 'child2'
			},
			{
				label: 'child3'
			},
		]
	},
...

Is it possible for a search of parent123 to return back that object (as usual) but for a search of child2 to get back:

[
	{
		label: 'parent123',
		children: [
			{
				label: 'child2'
			},
		]
	}
]

? :)

please add possibility to pass ref to the vue-fuse component.

How to reproduce

1. Set the initial value of the list to null
2. Update the value of the list to an array of items after 2 seconds

const items = ref(null);
const { search, results } = useVueFuse(items?.value || []);

onMounted(() => {
    setTimeout(() => {
      items.value = ["John Doe", "Jane Smith"];
    }, 2000);
});

Why an initial value of null?

Because it's very common to start with null, do an async API request to fetch some data, and set the data after the data is fetched.

Expected behaviour

• The list in useVueFuse is updated to ["John Doe", "Jane Smith"]

Actual behaviour

• The list in useVueFuse is still null

Code sandbox: https://codesandbox.io/s/elegant-hugle-rjug8m?file=/src/App.vue

It looks like quoted keys (e.g. "model":"model name") in the json object are not recognized. I'm using this with response from axios and search returns no results. Any thoughts?

I'd like to be able to prepopulate the <vue-fuse> component with a value, and have it automatically run the changed and input changed events, basically replicating what happens when a user types in a query, but done on page load.

I noticed you can do value="testing...", but that doesn't allow for :value- also it seems to just be filling in the input but doesn't actually fire any events.

There's the $search method, but that doesn't seem to be connected with the component version.

Any ideas?
Thanks

I have noticed recently in several Vue projects that when I imported this library it was a cause of breaking polyfills in Firefox (latest version).

Projects were run with Vue CLI either with a standard default configuration or custom. Both situation I was ending up with:

TypeError: "this.testPromise(...).then(...).finally is not a function" error.

I'm raising this issue in a case if someone else is wondering why Vue app stopped working on FF after importing this plugin.

I haven't got a chance yet to dig into the source and see what is actually causing that Firefox can't handle promises anymore so if someone will have spare time and help fix it I think much people will appreciate that.

Hi, I've installed vue-fuse & did import VueFuse from 'vue-fuse'.

Getting this error on npm run dev:

 error  in ./node_modules/vue-fuse/src/VueFuse.vue

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "C:\\xampp\\htdocs\\portal\\node_mo
dules\\vue-fuse\\.babelrc" at 0, attempted to resolve relative to "C:\\xampp\\htdocs\\portal\\node_modules\\vue-fuse"
    at C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\options\option-
manager.js:158:20)
    at OptionManager.mergeOptions (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\options\option
-manager.js:234:36)
    at OptionManager.init (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\options\option-manager
.js:368:12)
    at File.initOptions (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\xampp\htdocs\portal\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\xampp\htdocs\portal\node_modules\babel-loader\lib\index.js:49:20)
    at C:\xampp\htdocs\portal\node_modules\babel-loader\lib\fs-cache.js:118:18
    at ReadFileContext.callback (C:\xampp\htdocs\portal\node_modules\babel-loader\lib\fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13)

 @ ./node_modules/vue-fuse/src/VueFuse.vue 4:2-215
 @ ./node_modules/vue-fuse/index.js
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2
%"],"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/pa
ge-layout/leftSidebar.vue
 @ ./resources/assets/js/components/page-layout/leftSidebar.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/vendor.scss ./resources/assets/sass/app.scss

I'm not sure its my fault or not, but

import VueFuse from 'vue-fuse'

does't work for me. I had to import it directly:

import VueFuse from 'vue-fuse/src/components/VueFuse

Hi. How i can clear input field?

Hi,

Does this plugin support Vue 3? I'm having some problems loading the plugin.

Thanks,
Ben

Import Statement

import { createApp } from "vue";
import App from "./App.vue";
import VueFuse from "vue-fuse";

createApp(App)
  .use(VueFuse)
  .mount("#app");

Error Message

when trying to import I receive the following error:

Could not find a declaration file for module 'vue-fuse'.

Try npm install @types/vue-fuse if it exists or add a new declaration (.d.ts) file containing declare module 'vue-fuse';ts(7016)

then i receive:

npm install  @types/vue-fuse
npm ERR! code E404
npm ERR! 404 Not Found: @types/vue-fuse@latest

What's about input placeholder, I can't find it. Could you add placeholder property?

Is there any way to throttle input? I'm commiting to store when searching so it's doing a lot of mutations that pollute my history.

Didn't find anything here or at https://github.com/krisk/Fuse/search?q=throttle&type=Issues&utf8=%E2%9C%93.

Thanks!

like the title says i am getting Unexpected token '<'

Hi,
I get that error:

Module build failed: Error: Cannot find module 'babel-plugin-transform-runtime' from 'C:\projects\test\node_modules\vue-fuse'
- Did you mean "@babel/transform-runtime"?

Thank you for this plugin👍

Fuse js has an interested property : the token separator. Could you just add it to the props ?

Hello there,

I'd like to add your component, but unfortunately it isn't licensed yet. May I ask you to add one to clarify this situation?

Hello,

i am trying to use the useExtendedSearch option with vue-fuse but I dosen't seem to work.

I am setting up my options like this:

      searchOptions: {
          includeScore: true,
          useExtendedSearch: true,
          defaultAll: false,
          // Search in `author` and in `tags` array
          keys: ['searchable.name']
        }

and running my search like this:

        this.$search(this.searchQuery, this.searchList, this.searchOptions)
        .then(results => { })

If I do something like !keyword it still show me entries with keywordin its searchable.name.

Is there something wrong with my code, or is vue-fuse not supporting this option ?

Thanks a lot

Hi, i cannot browse to shayneo.github.io/vue-fuse and status.github shows that all systems are operational, maybe the link is wrong? Cheers

It would be awesome if you could add the typescript typings to the published package. Shouldn't be that hard, as you already created the function with typescript!

The search prop is undocumented and you have to dig through the source code or issues to figure out how to do something like clear the input.

Here's a simple example of how one could manage the search input's value. For anyone wanting to understand, the vue-fuse initializes the inputs value with the value of the search prop. It then watches the search prop and whenever it changes, it sets the input's value to the new value of search.

<template>
    <div>
        <vue-fuse 
            ...
            @fuseInputChanged="search = $event"
            :search="search"
        ></vue-fuse>
        <button @click="search = ''" type="button">Clear search</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            search: '',
        }
    }
}
</script>

Hello,

There's a bug on your demo page using Chrome on Android 8.
Typing does not filter the list until you focus out of the search input.
I'm facing the same problem trying to use fusejs with Nuxt.
Any ideas ?

Thx !

See issue #6 (comment)

The request is to have an option not to access the fuse logic via the input component, but as a standalone method that could be added as a mixin?

something like:

methods: {
  runSearch () {
    vuefuse.search(keys, list)
  }
}

Hey! Love the package, really great. The one question I had however is if you know of a way to remove the "X" that's visible when you hover over the input when some text has been added?

He is nowhere in the DOM
Applying styles doesn't help either.

postcss.config.js needs to be updated to

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    // ...
    tailwindcss('./tailwind.config.js'),
    require('autoprefixer'),
    // ...
  ]
}