Vue JSX Babel

sample.vue

<script>
import FloatingLabelTextInput from '@/components/FloatingLabelTextInput'
import Button from '@/components/Button'
import StringUtils from '@/utils/stringUtils'

export default
{
    name: 'set-password',
    
    render () 
    {
        return (
            <div id='set-password-view'>
                <floating-label-text-input placeholder='Nouveau mot de passe' v-model={this.newPassword} />
                <div>Votre nouveau mot de passe a {this.newPassword.length} lettres !</div>
                <Button class='save-password-button' text='Enregistrer mon nouveau mot de passe'
                    disabled={StringUtils.isEmptyString(this.newPassword)}
                    on-click={this.savePassword} />
            </div>
        )
    },
    
    data () 
    {
        return {
            newPassword: '',
        }
    },
    
    mounted ()
    {
    },
    
    methods:
    {
      savePassword ()
      {
        // ...
      }
    },
    
    components:
    {
        FloatingLabelTextInput,
        Button
    }
}
</script>

<style lang='less'>
@import '~@/styles/main.less';

#set-password-view
{
    .save-password.button
    {
        width: -webkit-fill-available;
        
        .OnDesktop({
          width: 100px;
        });
    }
}
</style>