Syntax Error when using 'target: server' with Nuxt.js

[rylax]

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?

[shayneo]

I think the problem is that the module ships the raw .vue file as opposed to a compiled js version. This was my overly simple technique to supporting both Vue2 and Vue3. To get this to work I think I'd need to leverage something like vue-demi, which might take me a while to get around to.

Until then, I HIGHLY recommend taking a look at the source-code, as you can easily drop Fuse.js into your project directly and build your own fuzzy search functionality. This package doesn't do anything special, just a convenience wrapper around Fuse.

[scottyzen]

I had the same issue but got it to work by wrapping the client-only component around it.

<client-only>
    <VueFuse />
</client-only>

Any the import the VueFuse component like this.

export default {
    components: {
        VueFuse: () => import('vue-fuse')
    }
}

[shayneo]

Closing as I just released 4.x, which takes this in a different direction

[rylax]

  VueFuse: () => import('vue-fuse')

While this approach did work for me in the end, I have just noticed that it created a huge memory leak. Trying to find a workaround now.

[hacknug]

  VueFuse: () => import('vue-fuse')

While this approach did work for me in the end, I have just noticed that it created a huge memory leak. Trying to find a workaround now.

Have you tried importing the component on a client-only plugin? That usually solves all the similar issues I encounter.