autocomplete icon indicating copy to clipboard operation
autocomplete copied to clipboard

Published 20 hours ago • verified publisher icon trevoreyre

Vue3 Support

Open Luigidefra opened this issue 3 years ago • 8 comments

Packages doesn't seems run with Vue3, will you update it?

Luigidefra avatar Feb 16 '21 15:02 Luigidefra

Do you have some examples of the errors you're seeing in Vue 3? I haven't tried it in v3 yet.

trevoreyre avatar Feb 17 '21 23:02 trevoreyre

Just a random example of errors:

runtime-core.esm-bundler.js:159 [Vue warn]: `beforeDestroy` has been renamed to `beforeUnmount`. 
  at <Autocomplete search=fn<bound search> > 
  at <SearchInput>
warn @ runtime-core.esm-bundler.js:159
applyOptions @ runtime-core.esm-bundler.js:5960
finishComponentSetup @ runtime-core.esm-bundler.js:6606
setupStatefulComponent @ runtime-core.esm-bundler.js:6539
setupComponent @ runtime-core.esm-bundler.js:6479
mountComponent @ runtime-core.esm-bundler.js:4219
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
mountChildren @ runtime-core.esm-bundler.js:3995
mountElement @ runtime-core.esm-bundler.js:3918
processElement @ runtime-core.esm-bundler.js:3899
patch @ runtime-core.esm-bundler.js:3819
componentEffect @ runtime-core.esm-bundler.js:4312
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
render @ runtime-core.esm-bundler.js:4895
mount @ runtime-core.esm-bundler.js:3135
app.mount @ runtime-dom.esm-bundler.js:1431
eval @ main.ts:41
eval @ main.ts:40
eval @ main.ts:34
./src/main.ts @ vC.umd.js:1815
__webpack_require__ @ vC.umd.js:30
eval @ entry-lib-no-default.js:3
./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js @ vC.umd.js:202
__webpack_require__ @ vC.umd.js:30
(anonymous) @ vC.umd.js:94
(anonymous) @ vC.umd.js:97
webpackUniversalModuleDefinition @ vC.umd.js:9
(anonymous) @ vC.umd.js:10
Show 4 more frames
runtime-core.esm-bundler.js:159 [Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> > 
  at <SearchInput>
warn @ runtime-core.esm-bundler.js:159
get @ runtime-core.esm-bundler.js:6244
__vue_render__ @ autocomplete.esm.js:632
renderComponentRoot @ runtime-core.esm-bundler.js:828
componentEffect @ runtime-core.esm-bundler.js:4294
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
mountChildren @ runtime-core.esm-bundler.js:3995
mountElement @ runtime-core.esm-bundler.js:3918
processElement @ runtime-core.esm-bundler.js:3899
patch @ runtime-core.esm-bundler.js:3819
componentEffect @ runtime-core.esm-bundler.js:4312
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
render @ runtime-core.esm-bundler.js:4895
mount @ runtime-core.esm-bundler.js:3135
app.mount @ runtime-dom.esm-bundler.js:1431
eval @ main.ts:41
eval @ main.ts:40
eval @ main.ts:34
./src/main.ts @ vC.umd.js:1815
__webpack_require__ @ vC.umd.js:30
eval @ entry-lib-no-default.js:3
./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js @ vC.umd.js:202
__webpack_require__ @ vC.umd.js:30
(anonymous) @ vC.umd.js:94
(anonymous) @ vC.umd.js:97
webpackUniversalModuleDefinition @ vC.umd.js:9
(anonymous) @ vC.umd.js:10
Show 7 more frames
runtime-core.esm-bundler.js:159 [Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> > 
  at <SearchInput>
warn @ runtime-core.esm-bundler.js:159
get @ runtime-core.esm-bundler.js:6244
__vue_render__ @ autocomplete.esm.js:632
renderComponentRoot @ runtime-core.esm-bundler.js:828
componentEffect @ runtime-core.esm-bundler.js:4294
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
mountChildren @ runtime-core.esm-bundler.js:3995
mountElement @ runtime-core.esm-bundler.js:3918
processElement @ runtime-core.esm-bundler.js:3899
patch @ runtime-core.esm-bundler.js:3819
componentEffect @ runtime-core.esm-bundler.js:4312
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
render @ runtime-core.esm-bundler.js:4895
mount @ runtime-core.esm-bundler.js:3135
app.mount @ runtime-dom.esm-bundler.js:1431
eval @ main.ts:41
eval @ main.ts:40
eval @ main.ts:34
./src/main.ts @ vC.umd.js:1815
__webpack_require__ @ vC.umd.js:30
eval @ entry-lib-no-default.js:3
./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js @ vC.umd.js:202
__webpack_require__ @ vC.umd.js:30
(anonymous) @ vC.umd.js:94
(anonymous) @ vC.umd.js:97
webpackUniversalModuleDefinition @ vC.umd.js:9
(anonymous) @ vC.umd.js:10
Show 7 more frames
runtime-core.esm-bundler.js:159 [Vue warn]: Unhandled error during execution of render function 
  at <Autocomplete search=fn<bound search> > 
  at <SearchInput>
warn @ runtime-core.esm-bundler.js:159
logError @ runtime-core.esm-bundler.js:332
handleError @ runtime-core.esm-bundler.js:324
renderComponentRoot @ runtime-core.esm-bundler.js:937
componentEffect @ runtime-core.esm-bundler.js:4294
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
mountChildren @ runtime-core.esm-bundler.js:3995
mountElement @ runtime-core.esm-bundler.js:3918
processElement @ runtime-core.esm-bundler.js:3899
patch @ runtime-core.esm-bundler.js:3819
componentEffect @ runtime-core.esm-bundler.js:4312
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
render @ runtime-core.esm-bundler.js:4895
mount @ runtime-core.esm-bundler.js:3135
app.mount @ runtime-dom.esm-bundler.js:1431
eval @ main.ts:41
eval @ main.ts:40
eval @ main.ts:34
./src/main.ts @ vC.umd.js:1815
__webpack_require__ @ vC.umd.js:30
eval @ entry-lib-no-default.js:3
./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js @ vC.umd.js:202
__webpack_require__ @ vC.umd.js:30
(anonymous) @ vC.umd.js:94
(anonymous) @ vC.umd.js:97
webpackUniversalModuleDefinition @ vC.umd.js:9
(anonymous) @ vC.umd.js:10
Show 7 more frames
runtime-core.esm-bundler.js:338 Uncaught TypeError: Cannot read property '_c' of undefined
    at Proxy.__vue_render__ (autocomplete.esm.js:632)
    at renderComponentRoot (runtime-core.esm-bundler.js:828)
    at componentEffect (runtime-core.esm-bundler.js:4294)
    at reactiveEffect (reactivity.esm-bundler.js:71)
    at effect (reactivity.esm-bundler.js:46)
    at setupRenderEffect (runtime-core.esm-bundler.js:4277)
    at mountComponent (runtime-core.esm-bundler.js:4235)
    at processComponent (runtime-core.esm-bundler.js:4195)
    at patch (runtime-core.esm-bundler.js:3822)
    at mountChildren (runtime-core.esm-bundler.js:3995)
__vue_render__ @ autocomplete.esm.js:632
renderComponentRoot @ runtime-core.esm-bundler.js:828
componentEffect @ runtime-core.esm-bundler.js:4294
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
mountChildren @ runtime-core.esm-bundler.js:3995
mountElement @ runtime-core.esm-bundler.js:3918
processElement @ runtime-core.esm-bundler.js:3899
patch @ runtime-core.esm-bundler.js:3819
componentEffect @ runtime-core.esm-bundler.js:4312
reactiveEffect @ reactivity.esm-bundler.js:71
effect @ reactivity.esm-bundler.js:46
setupRenderEffect @ runtime-core.esm-bundler.js:4277
mountComponent @ runtime-core.esm-bundler.js:4235
processComponent @ runtime-core.esm-bundler.js:4195
patch @ runtime-core.esm-bundler.js:3822
render @ runtime-core.esm-bundler.js:4895
mount @ runtime-core.esm-bundler.js:3135
app.mount @ runtime-dom.esm-bundler.js:1431
eval @ main.ts:41
eval @ main.ts:40
eval @ main.ts:34
./src/main.ts @ vC.umd.js:1815
__webpack_require__ @ vC.umd.js:30
eval @ entry-lib-no-default.js:3
./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js @ vC.umd.js:202
__webpack_require__ @ vC.umd.js:30
(anonymous) @ vC.umd.js:94
(anonymous) @ vC.umd.js:97
webpackUniversalModuleDefinition @ vC.umd.js:9
(anonymous) @ vC.umd.js:10
Show 5 more frames

rmzg avatar Mar 08 '21 03:03 rmzg

Some of those are breaking changes. Any plans to migrate to Vue3?

vitality82 avatar Sep 06 '21 06:09 vitality82

any news ?

bci24 avatar Nov 30 '21 12:11 bci24

@trevoreyre any luck for this?

salsoftsafeeullahsarhandi avatar Oct 24 '22 14:10 salsoftsafeeullahsarhandi

Hi there! I think I'm also having vue3 issues.

I tried using autocomplete within a vue3 component like this:

<script lang="ts">
import { defineComponent } from 'vue'

import Autocomplete from '@trevoreyre/autocomplete-vue'

export default defineComponent({
  components: {
    Autocomplete,
  },
  methods: {
    search(input: string) {
      const countries = ['Germany', 'United States of America', 'Sweden']
      if (input.length < 1) {
        return []
      }
      return countries.filter((country) => {
        return country.toLowerCase().startsWith(input.toLowerCase())
      })
    },
  },
})
</script>

<template>
  <autocomplete
    :search="search"
    placeholder="Search for a country"
    aria-label="Search for a country"
  />
</template>

I can't get it to work. Some errors I see:

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://127.0.0.1:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://127.0.0.1:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Unhandled error during execution of render function 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App>

Any thoughts?

Thanks!!

dustinmichels avatar Nov 07 '22 03:11 dustinmichels

Hi there! I think I'm also having vue3 issues.

I tried using autocomplete within a vue3 component like this:

<script lang="ts">
import { defineComponent } from 'vue'

import Autocomplete from '@trevoreyre/autocomplete-vue'

export default defineComponent({
  components: {
    Autocomplete,
  },
  methods: {
    search(input: string) {
      const countries = ['Germany', 'United States of America', 'Sweden']
      if (input.length < 1) {
        return []
      }
      return countries.filter((country) => {
        return country.toLowerCase().startsWith(input.toLowerCase())
      })
    },
  },
})
</script>

<template>
  <autocomplete
    :search="search"
    placeholder="Search for a country"
    aria-label="Search for a country"
  />
</template>

I can't get it to work. Some errors I see:

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://127.0.0.1:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://127.0.0.1:5173/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Unhandled error during execution of render function 
  at <Autocomplete search=fn<bound search> placeholder="Search for a country" aria-label="Search for a country" > 
  at <Search> 
  at <App>

Any thoughts?

Thanks!!

@dustinmichels many things has been changed for Vue3 core apis and this package not compatible

salsoftsafeeullahsarhandi avatar Nov 07 '22 09:11 salsoftsafeeullahsarhandi

Any updates?

sunujacob avatar Jul 13 '23 15:07 sunujacob

bump

marsidev avatar Mar 13 '24 00:03 marsidev

currently working on it.

sebbayer avatar Mar 25 '24 18:03 sebbayer

please update @trevoreyre/autocomplete-vue to at least 3.0.1 for Vue 3 support.

sebbayer avatar Apr 02 '24 14:04 sebbayer