Vue 3 Compatibility

[nVitius]

This patch enables compatibility with Vue 3.
Aside from a couple deprecations that were fixed, I changed the build tool to rollup in stead of webpack.

Tests will likely need to be updated.

[printscreen]

Thank you so much for this.

[PeachScript]

Thanks for your nice work! Maybe dev on full-clean branch then release a major version would be better?

[PeachScript]

And can this PR be released as an alpha version? Maybe the temp version that supported Vue.js 3.0 be helpful to users, we can release a version first, and then continue to improve it

[productdevbook]

@PeachScript when merge ? and can I use nuxt width used composition api ?

[PeachScript]

@PeachScript when merge ? and can I use nuxt width used composition api ?

After all test cases updated. But we can first release a alpha version if @nVitius confirm this PR can be released

[nVitius]

@PeachScript Sorry for the late reply from me. If you make a new branch on the main repo (I called mine next. I've seen that in a lot of other vue libs working on v3 support), I can change the PR to go there and we can merge in and make the alpha release. I'll also add a commit to update the package.json with a -beta version so we can publish to npm.

[PeachScript]

@nVitius thanks for your reply ❤️ I've already create the next branch, but I hope merge it after we completed code review & test cases paased, so I've published an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the PR branch, as the temporary way for Vue.js 3.0 projects.

@printscreen @productfrontenddeveloper it would be better if you could test it with your projects and feedback :D

[productdevbook]

@nVitius thanks for your reply ❤️ I've already create the next branch, but I hope merge it after we completed code review & test cases paased, so I've published an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the PR branch, as the temporary way for Vue.js 3.0 projects.

@printscreen @productfrontenddeveloper it would be better if you could test it with your projects and feedback :D

iam nuxt 2, vue 2 with nuxt compotion api. I can say that nuxt 3 will be out soon then. then i can try :D

[phantomlsh]

Currently, the spinner setting for the alpha version is very wired. You have to assign it like the following:

<infinite-loading :identifier="identifier" @infinite="load" :spinner="2">
  <template v-slot:no-more>no more</template>
  <template v-slot:no-results>no results</template>
</infinite-loading>

It's using an index to represent various spinner listed in the doc.

A brief inspection into the codes in src shows that it is due to the processing of spinnerView variable from the props.

[nVitius]

@phantomlsh Thanks for the report! I just pushed a commit that should fix that issue.
Will you test it out when you have the chance? Until a new npm version is released, you can install it like this:
npm i --save 'github:nvitius/vue-infinite-loading#next'

[noeGnh]

@nVitius Thanks for your work but i tested with your fork and the issue reported by @phantomIsh persists

[noeGnh]

There is another bug with spinner. If you use custom tag with slot="spinner" or <template #spinner> it doesn't hide the spinner after loading. It does for default spinners, but not from custom. I had to hide it myself right after the $state.complete()

[nVitius]

I forgot to re-run the build before committing. I pushed another commit with the updated dist files.

@noeGnh Could you provide a small reproduction for the custom spinner issue? We are using v-show on the parent div of the spinner slot. I don't immediately see why it wouldn't work.

[noeGnh]

Hi @nVitius,
here is a reproduction of the issue: https://codesandbox.io/s/vue-infinite-loading-issue-pi6cj

[nVitius]

@noeGnh Thanks for setting that up.
I worked a bit on this over the weekend. It looks like Vue 3 has an issue where a v-bind:style that is undefined will overwrite the style on the element and set it to empty. I've opened a PR on the Vue repo to try and address it. In the meantime, I've fixed it so that slotStyles compute to an empty object instead of undefined.

[noeGnh]

@nVitius Thanks for your work !

[nVitius]

@PeachScript Can you publish the new build to npm?

I've had the opportunity to work extensively with the Composition API over the past 6 months or so. I want to take some time soon and refactor the components in here to use it, as well as update the tests and such so we can get this PR merged in.

[Sublime1]

Is there any update on this issue?

[shashank261]

Any update on this?

[shashank261]

Currently, the spinner setting for the alpha version is very wired. You have to assign it like the following:

<infinite-loading :identifier="identifier" @infinite="load" :spinner="2">
  <template v-slot:no-more>no more</template>
  <template v-slot:no-results>no results</template>
</infinite-loading>

It's using an index to represent various spinner listed in the doc.

A brief inspection into the codes in src shows that it is due to the processing of spinnerView variable from the props.

I cannot have empty(no value) in the slots. It is possible with the previous version.

[nVitius]

@shashank261 Thanks for the report. I just pushed up a commit that should fix that issue. You can try it out by installing from my fork:
npm i --save 'github:nvitius/vue-infinite-loading#next'

[Sublime1]

Hi, can someone explain what has to happen for this to make it into the main release? We're waiting on this over on https://github.com/antoine92190/vue-advanced-chat

Thanks!

[productdevbook]

@PeachScript any progress ?

[printscreen]

@nVitius thanks for your reply ❤️ I've already create the next branch, but I hope merge it after we completed code review & test cases paased, so I've published an pre-alpha version vue-infinite-loading@3.0.0-alpha.0-0 base on the PR branch, as the temporary way for Vue.js 3.0 projects.

@printscreen @productfrontenddeveloper it would be better if you could test it with your projects and feedback :D

@PeachScript We have been using 3.0.0-alpha.0-0 in production with no problem. Just following up from your previous comment.

[productdevbook]

npm i --save 'github:nvitius/vue-infinite-loading#next'

vue3 testted good working

[gustawdaniel-acaisoft]

 node --version
v16.13.2
  npm --version
8.1.2

Hangs on install during "reify:nan" in "reify:audit" after these lines

npm http fetch GET 200 https://registry.npmjs.org/vue-loader 246ms (cache hit)
npm timing metavuln:packument:vue-loader Completed in 255ms
npm timing metavuln:load:security-advisory:vue-loader:Pp1IW5wVzYexdOySlO/aAbqI2U/7il4gIjSOUDymIHC8cUtXeZL9vUdcRSFS5haoxlwjfhRs5hiV4iRUz1rJCg== Completed in 2ms
npm timing metavuln:calculate:security-advisory:vue-loader:Pp1IW5wVzYexdOySlO/aAbqI2U/7il4gIjSOUDymIHC8cUtXeZL9vUdcRSFS5haoxlwjfhRs5hiV4iRUz1rJCg== Completed in 257ms
npm timing metavuln:cache:get:security-advisory:listr-update-renderer:zOQB0PbNfy+2HdBM0HrEL+BwfaUzJTv9ZlpJZ9JwcOJoaxHQN021S+9kwPsfZq0g9Uo1y3UYYMrWP0QqWPB5hQ== Completed in 2ms
npm timing metavuln:load:security-advisory:listr-update-renderer:J06/DTp8oqjxiBqYUWpEItMGCNfkKxzmVHNyz719u956SNJBNE5sR3ZQug0yKGv6PDdcwyMyG5eV8oIV9wifzw== Completed in 0ms
npm timing metavuln:calculate:security-advisory:listr-update-renderer:J06/DTp8oqjxiBqYUWpEItMGCNfkKxzmVHNyz719u956SNJBNE5sR3ZQug0yKGv6PDdcwyMyG5eV8oIV9wifzw== Completed in 2ms
npm timing metavuln:cache:get:security-advisory:@graphql-codegen/cli:6RQfdYOpFrVbzP+x3+oJvOOUSeIkwVhgGpKW5eLzfyRpGhXaDnseLtaQstrjmNAjI6NG9QDqKh7yLxYKOGd7TQ== Completed in 5ms
npm timing metavuln:load:security-advisory:@graphql-codegen/cli:J06/DTp8oqjxiBqYUWpEItMGCNfkKxzmVHNyz719u956SNJBNE5sR3ZQug0yKGv6PDdcwyMyG5eV8oIV9wifzw== Completed in 216ms
npm timing metavuln:calculate:security-advisory:@graphql-codegen/cli:J06/DTp8oqjxiBqYUWpEItMGCNfkKxzmVHNyz719u956SNJBNE5sR3ZQug0yKGv6PDdcwyMyG5eV8oIV9wifzw== Completed in 222ms
npm timing auditReport:init Completed in 2586ms
npm timing reify:audit Completed in 3200ms

[productdevbook]

@PeachScript please pull merge.

[kuro96al]

Does not work if more than one InfiniteLoading component on the same page
I think stateChanger is shared on ALL InfiniteLoading

[bhanu2217]

When are you planning to make release for Vue.js 3 support?

[santhanakrishnanstark]

@printscreen is this 3.0.0-alpha.0-0 version works with multiple component on the same page ? because for me it is not working if one component doesn't have data then the other component stopped the infinite loading and show just the initial loaded data. what to do ?

[gitinthehole]

@PeachScript Also interested in checking in on this progress. Thank you!

[ankurk91]

"vue-infinite-loading": "3.0.0-alpha.0-0", is working fine for me already, please merge this PR