race condition and other oddities when using with Vite / Vue 3 #24
Description
I've been using chessboard-element for well over a year within a Vue 2 project and I've never had any issues with it, it just worked perfectly.
Recently I migrated my project to Vue 3 / Vite and I noticed one pretty jarring issue.
It appears as though the board will ONLY load if the <chess-board> element is available BEFORE the import 'chessboard-element';
This didn't use to be a problem somehow, but since migrating to Vue 3, order really matters now and it's problematic. I've kind of hacked my way around the issue by including my import 'chessboard-element'; inside a child component every time I have a chess-board element, this ensures that the chess-board is available in the dom before its child component has finished mounting.
I'm a bit baffled as to what's causing change in behaviour all of a sudden.
It would be useful if there was a global (attached to window for example) command I could issue to "look for chess-board elements and activate" any new elements that weren't present the last time.
On a side note, I would also find it useful if there was a "ready" event that I could listen to on the chess-board.
If you have any ideas how I may work around this oddity in a less hacky way, I'd really love to hear it!
Many thanks