Feature: expose/emit Vue template compiler errors

[codebender828]

Hey @elevatebart ! Thanks for the work with this package.

I'm using it on a documentation site for project of mine called Chakra UI Vue. https://chakra-ui-vue.now.sh/accordion#usage

I'd like a way to access the errors captured during the template compilation process so we can relay the error to the user. Is this possible with vue-live?

[elevatebart]

Hello @codebender828,

Great work on Crakra UI. I have been a long-running advocate of the simplicity and accessibility of its react components. Glad vue-live can help understand the project even better.

Regarding the template compilation error, I believe this is very much possible, even easy. But for now it does not work.

Would something like this do the trick ?
#34

vue-live/demo/App.vue

Lines 17 to 23 in 93a664c

	<VueLive
	:editorProps="{ lineNumbers: true }"
	:code="codeTemplate"
	:layout="CustomLayout"
	:components="registeredComponents"
	@error="(e) => log('hello', e)"
	/>

[elevatebart]

I have my answer... it does not show any errors about the template.
Will try to figure it out.

[codebender828]

Hey @elevatebart ! Thanks for the quick response! Yes something like this would be good. 👍🏽⚡

In addition to emitting the error event, it would also be good if you can create an opt-in prop to allow errors to propagate to the consumer context. What do you think?

<VueLive
  :code="code"
  :shouldPropagateTemplateErrors="true"
  @error="handleTemplateErrors"
/>

It would be useful in case the user only has an error boundary component around the vue-live component and they would like to trap/handle the errors there.

Either one would be a good way to have access to those template compilation errors.

[elevatebart]

Hello @codebender828 ,

I am afraid that if we let the error bubble up, the editor will be blocked by the error and stop functioning. I will make another Issue for it.

See if I can integrate it.

[elevatebart]

🎉 This issue has been resolved in version 1.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[codebender828]

Thanks! Cheers! @elevatebart !