dillonchanis / vue-error-boundary

A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
MIT License
91 stars 9 forks source link

Vue 3 support #9

Closed JuroOravec closed 3 years ago

JuroOravec commented 3 years ago

Hi, does this work with Vue 3? Is the support for Vue 3 planned?


I had a look at the code. I haven't actually run it, but I see 4 things that might break this component if tried with Vue 3:

1) The component uses the createElement (aka h) function from render callback

   // Vue component options
   {
     name: 'MyComponent'
     ...
     render(h) {
       ...
       return h(...)
     }
   }

whereas Vue 3 compatible way is to import it from vue (see docs)

   import { h } from 'vue';

   // Vue component options
   {
     name: 'MyComponent'
     ...
     render() {
       ...
       return h(...)
     }
   }

2) The component uses $scopedSlots, which are merged to slots in Vue 3 (see docs).

3) Custom events emitted. To make it in line with Vue 3, the custom event errorCaptured should be documented in emits Vue component option (see docs).

4) VNode interaction. Don't know if the VNode API has changed in a way that could affect package, but it should be tested.

dillonchanis commented 3 years ago

Yeah for sure a good idea. I've been thinking about it lately. I can probably get to it tonight or tomorrow!

LifeIsStrange commented 3 years ago

I would love to be able to use this library :)

dillonchanis commented 3 years ago

Rewrote it in Vue 3 + TypeScript. Not much has changed but take a look over the README again. Renamed it to VErrorBoundary so its more obvious it's coming from a 3rd party package. Let me know if there are any issues!