import VueFuse

[ulou]

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

[shayneo]

Sorry for the long delay on this! Were you able to get around this issue?

If not, which version are you using? And would you mind posting a sample of your main.js?

Cheers!

[petterw03]

Same problem here. Getting error Failed to mount component: template or render function not defined.
vue 2.5.22
vue-fuse 2.0.2

Using import VueFuse from 'vue-fuse/src/components/VueFuse' instead works as expected.

[shayneo]

Can you send me your main.js? I can't replicate

[petterw03]

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueFuse from 'vue-fuse'

Vue.use(VueFuse)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app-2019-01-smeknamn')

App.vue:

<template>
<div id="app">
  <vue-fuse
    :keys="keys"
    :list="options"
    :defaultAll="false"
    event-name="results"
    :minMatchCharLength="2"
  ></vue-fuse>
</div>
</template>

This is following the documentation. Gives the error Unknown custom element: <vue-fuse> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Moving the import VueFuse from 'vue-fuse' line to App.vue and adding VueFuse to the component list fixed the above error but instead gives the error [Vue warn]: Failed to mount component: template or render function not defined. And then again, switching it out to import VueFuse from 'vue-fuse/src/components/VueFuse' fixes that error and makes everything work as expected.

[renatodeleao]

@shayneo from what i can look at the source you have a few issues with main file (src/index.js).
I'm by no means an expert in vue plugins (or anything), and you can do it in more than a way, but the the final export "should expose an install method"

https://github.com/shayneo/vue-fuse/blob/master/src/index.js#L12-L13

That beeing said your entry file should at least

// Your src/index.js file
import Vue from 'vue'
import VueFuse from './components/VueFuse.vue'
import Fuse from 'fuse.js'

/*
 *an install function, y
 */
const install = function (Vue, options) {
  Vue.component(VueFuse.name, VueFuse)
  Vue.prototype.$search = function (term, list, options) {
    return new Promise(function (resolve, reject) {
    var run = new Fuse(list, options)
    var results = run.search(term)
    resolve(results)
   })
 }
}

VueFuse.install = install
export default VueFuse;


// OR OBJECT FLAVOUR 
const Plugin = {
   install: function (Vue, options) {
       // same as above
   }
}

export default Plugin;

// or also exporting an object including the Components to be use locally (see link to Portal) 

There's a lot of other ways to do it, but i'm pretty sure you know about it and just forgot to add them. I was just passing by while searching for fuse vue wrappers. Sry for the long post.
(Instead of this bad theory lesson, here some examples. I suggest you look at LinusBorg example, as he is part of the Vue team and reference in the community)

• https://github.com/LinusBorg/portal-vue/blob/develop/src/index.js
• https://github.com/renatodeleao/rollup-starter-vue-lib/blob/master/src/index.js

[shayneo]

Fix in progress here: https://github.com/shayneo/vue-fuse/tree/fix-install-method

Having some issues with the bundle step with vue-cli... will update when resolved

[shayneo]

Should be fixed in 2.1.0, please let me know if issues continue. Thanks!!