Customizing keyboard buttons

This issue has been tracked since 2022-09-06.

I'm trying to customize my keyboard passing the following option in my VUE.
watch: { guessedLetters: { handler(guessedLetters) { this.keyboard.addButtonTheme( => name.toUpperCase()).join(" "), "is-dark" ); ); } }

also tried from documentation by adding buttonTheme[...] but not working,
My console shows that it gets class and letters
Screenshot from 2022-09-06 11-11-06

hodgef wrote this answer on 2022-09-07

Hey @mirodil1, please share a runnable repro (sandbox or git repo) of your current attempt, that will make it easier to debug.

Will reopen the thread once that is provided. Thank you

mirodil1 wrote this answer on 2022-09-07

@hodgef thanks for answer, my git repo

hodgef wrote this answer on 2022-09-07

Thanks for the repro,

As far as I can tell, your watcher's handler (watch: { guessedLetters: { handler(guessedLetters) { ...) is never being called - which is not a simple-keyboard issue.

If I call addButtonTheme directly in the Keyboard's onKeyPress, it works:


So first you'd need to find out why your Vue watcher is not being called, there might be a few posts on this on StackOverflow.

I also suggest looking at existing implementations of Wordle with simple-keyboard. You can find some of them in the Dependents Tree:

Francisco Hodge

mirodil1 wrote this answer on 2022-09-07

@hodgef I made some changes to repo, can you check it pls, watchers handler is called when a word submitted.

I also checked it gets class but not affecting css, I don't know why, I guess everything is fine on my side.
Screenshot from 2022-09-07 10-14-23

Screenshot from 2022-09-07 10-14-12

hodgef wrote this answer on 2022-09-07

Try removing "scoped" from your CSS:


simple-keyboard uses vanilla JS to create elements so Vue scoping won't work here. Regards

mirodil1 wrote this answer on 2022-09-07

Thanks very much, worked now

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-02
Star Count 1737
Watcher Count 20
Fork Count 130
Issue Count 0


Issue Title Created Date Updated Date