JHipster uses Bootstrap 4 as its UI framework. Since we are building a Vue application, it makes sense to use a native Vue binding instead of Bootstrap's jQuery-based components. BootstrapVue (https://bootstrap-vue.js.org/) provides pure Vue components and directives for Bootstrap 4.

We only register the components we require in src/main/webapp/app/shared/config/config-bootstrap-vue.ts.

Let's take a look at src/main/webapp/app/account/login-form/login-form.vue:

<template>
    ...
                <b-alert show variant="danger" v-
                    if="authenticationError" v-html="...">
                    ...
                </b-alert>
            </div>
            <div class="col-md-8">
                <b-form role="form" v-on:submit.prevent="doLogin()">
                    <b-form-group v-bind:label="..." label-
                      for="username">
                        <b-form-input id="username" type="text" ... 
                           v-model="login">
                        </b-form-input>
                    </b-form-group>
                    ...
                    <b-form-checkbox id="rememberMe" name="rememberMe" 
                      v-model="rememberMe" checked >
                      <span v-text="$t('login.form.rememberme')
                       ">Remember me</span>
                    </b-form-checkbox>
                    <div>
                        <b-button type="submit" variant="primary"
                           v-text="$t('login.form.button')">Sign in
                        </b-button>
                    </div>
                </b-form>
                ...
            </div>
        </div>
    </div>
</template>
...

The preceding template uses standard HTML for the markup, along with additional custom-elements (directives and components) that are defined using Vue.js.