docs(modal): provide an example to bind event listeners

[noook]

🔗 Linked issue

#1604

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds a new example on how to use event listeners with useModal

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

@noook When looking at the preview, the modal.vue tab is not showing anything. Do you have the same issue locally?

[noook]

I noticed it as well, tried to reproduce locally but I can't, it works just fine locally

[noook]

@benjamincanac This seems to be due to the server returning Nuxt's 404 error page for the requested component instead of the component's code. I wonder what's causing this 🤔

[benjamincanac]

It might be easier to just display the code group and use the :component-example underneath.

[noook]

What do you have in mind ? Do you mean using the code group and copy the content of the two files in it, and display the preview underneath ?

The idea was not to have to copy the code so that it is synced with what's actually displayed

[benjamincanac]

Then you might have to move them out of the :code-group, not really sure how to fix it at the moment 🤔

[noook]

@benjamincanac Hacked it 😂

I checked what was going on, and it seems that the components meta-data are generated during the pre-rendering, and as the component is only displayed under the second tab it is not shown on pre-render.

This hack just references the component so it is loaded as built time, but it doesn't show anything as there is no code nor preview.

[benjamincanac]

Thanks @noook! 😊