User:Roan Kattouw (WMF)/Codex example gadget (assuming better Vue support in gadgets)/codextest-main.vue

 Hello !        Change your name  

const { ref } = require( 'vue' ); const { CdxButton } = require( '@wikimedia/codex' ); const ChangeNameDialog = require( './codextest-ChangeNameDialog.vue' );

module.exports = { components: { CdxButton, ChangeNameDialog },   setup { const dialogOpen = ref( false ); const displayName = ref( '(name unknown)' );

function saveName( newName ) { displayName.value = newName; dialogOpen.value = false; }

return { dialogOpen, displayName, saveName };   } };

.testgadget-name { font-style: italic; }