Vue3 Support #123

Luigidefra · 2021-02-16T15:44:01Z

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

trevoreyre · 2021-02-17T23:06:54Z

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

rmzg · 2021-03-08T03:58:56Z

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

vitality82 · 2021-09-06T06:39:17Z

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

bci24 · 2021-11-30T12:29:53Z

any news ?

salsoftsafeeullahsarhandi · 2022-10-24T14:27:16Z

@trevoreyre any luck for this?

dustinmichels · 2022-11-07T03:52:35Z

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!!

salsoftsafeeullahsarhandi · 2022-11-07T09:45:49Z

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

sunujacob · 2023-07-13T15:33:20Z

Any updates?

marsidev · 2024-03-13T00:54:14Z

bump

sebbayer · 2024-03-25T18:11:58Z

currently working on it.

sebbayer · 2024-04-02T14:24:59Z

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

develth · 2024-07-29T18:06:06Z

example is broken, does not work

sebbayer · 2024-07-30T09:00:19Z

@develth you mean the Codepen examples in the documentation, right?
@trevoreyre if you read this, I would like to kindly ask you to update all the Codepen examples so they embed the latest Vue 3 Javascript, as I don't have access to those Codepens. Currently they include Vue 2.6.6. That should fix it.

develth · 2024-07-30T15:51:04Z

@develth you mean the Codepen examples in the documentation, right?

Yes. Sorry for not pointing that out

trevoreyre mentioned this issue Feb 17, 2021

Not Vuejs compatible if looking to customize. #125

Open

trevoreyre added help wanted Extra attention is needed vue Only applies to the autocomplete-vue package labels Feb 17, 2021

sebbayer mentioned this issue Mar 27, 2024

Update vue 3 #172

Merged

digitas-git closed this as completed in #172 Mar 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue3 Support #123

Vue3 Support #123

Luigidefra commented Feb 16, 2021

trevoreyre commented Feb 17, 2021

rmzg commented Mar 8, 2021

vitality82 commented Sep 6, 2021

bci24 commented Nov 30, 2021

salsoftsafeeullahsarhandi commented Oct 24, 2022

dustinmichels commented Nov 7, 2022

salsoftsafeeullahsarhandi commented Nov 7, 2022

sunujacob commented Jul 13, 2023

marsidev commented Mar 13, 2024

sebbayer commented Mar 25, 2024

sebbayer commented Apr 2, 2024 •

edited

Loading

develth commented Jul 29, 2024

sebbayer commented Jul 30, 2024

develth commented Jul 30, 2024 •

edited

Loading

Vue3 Support #123

Vue3 Support #123

Comments

Luigidefra commented Feb 16, 2021

trevoreyre commented Feb 17, 2021

rmzg commented Mar 8, 2021

vitality82 commented Sep 6, 2021

bci24 commented Nov 30, 2021

salsoftsafeeullahsarhandi commented Oct 24, 2022

dustinmichels commented Nov 7, 2022

salsoftsafeeullahsarhandi commented Nov 7, 2022

sunujacob commented Jul 13, 2023

marsidev commented Mar 13, 2024

sebbayer commented Mar 25, 2024

sebbayer commented Apr 2, 2024 • edited Loading

develth commented Jul 29, 2024

sebbayer commented Jul 30, 2024

develth commented Jul 30, 2024 • edited Loading

sebbayer commented Apr 2, 2024 •

edited

Loading

develth commented Jul 30, 2024 •

edited

Loading