Let's take a look at the generated code. Since we looked at the server-side code in the previous chapters, we will only look at the client-side code here:

This structure is slightly different from what we saw for Angular and React. We are only concerned about the code inside src/main/webapp/app since everything else is exactly the same as what we saw for the Angular/React application.

Let's take a look at some of the important parts of the code:

• main.ts: This is the entry point of our application. This is where we bootstrap Vue to the root div and initialize the application, along with other dependencies such as Vuex store, Bootstrap, and i18n:

...
Vue.config.productionTip = false;
config.initVueApp(Vue);
config.initFortAwesome(Vue);
bootstrapVueConfig.initBootstrapVue(Vue);
Vue.use(Vue2Filters);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('jhi-item-count', JhiItemCountComponent);

const i18n = config.initI18N(Vue);
const store = config.initVueXStore(Vue);

const alertService = new AlertService(store);
const translationService = new TranslationService(store, i18n);
const loginService = new LoginService();
const accountService = new AccountService(store, translationService, router);

...

/* tslint:disable */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  provide: {
    loginService: () => loginService,
    ...
    accountService: () => accountService
  },
  i18n,
  store
});

• app.component.ts: This is our main application component:

...
@Component({
  components: {
    ribbon: Ribbon,
    'jhi-navbar': JhiNavbar,
    'login-form': LoginForm,
    'jhi-footer': JhiFooter
  }
})
export default class App extends Vue {}

• app.vue: This is our main application component template. We define the main application UI structure here:

<template>
  <div id="app">
    <ribbon></ribbon>
    <div id="app-header">
      <jhi-navbar></jhi-navbar>
    </div>
    <div class="container-fluid">
      <div class="card jh-card">
        <router-view></router-view>
      </div>
      <b-modal id="login-page" hide-footer lazy>
        <span slot="modal-title" id="login-title" v-
          text="$t('login.title')">Sign in</span>
        <login-form></login-form>
      </b-modal>

      <jhi-footer></jhi-footer>
    </div>
  </div>
</template>

<script lang="ts" src="./app.component.ts">
</script>

• constants.ts: Application constants.
• router: All of the application's routes are defined here and they are imported into main.ts from here.
• account: The login and logout components, along with Account pages such as settings, and password reset, can be found here. 
• admin: The admin screens, such as metric, health, and user management,  are here.
• entities: The entity modules are present here.
• core: The core application UI modules, such as home, navigation bar, and error, can be found here.
• locale: Translation service used by the application.
• shared: Shared components and reducers:
  • alert: Alert mixins and services are defined here.
  • config: This is where framework-level configurations are done:
    • axios-interceptor.ts: HTTP interceptors are configured here. This is where the JWT tokens are set to requests and errors are handled.
    • config-bootstrap-vue.ts: Bootstrap components are declared here.
    • config.ts: Application configurations, such as fonts, store, i18n, and date formats, are executed here.
    • formatter.ts: Formatters used in the application.
    • store: Vuex stores are defined here:
      • account-store.ts: This is used for account-related actions. It defines the state and mutations that can be used:
     

export const accountStore: Module<any, any> = {
  state: {
    logon: false,
    userIdentity: null,
    authenticated: false,
    ribbonOnProfiles: '',
    activeProfiles: ''
  },
  getters: {
    logon: state => state.logon,
    account: state => state.userIdentity,
    authenticated: state => 
        state.authenticated,
    activeProfiles: state => 
        state.activeProfiles,
    ribbonOnProfiles: state => 
        state.ribbonOnProfiles
  },
  mutations: {
    authenticate(state) {
      state.logon = true;
    },
    authenticated(state, identity) {
      state.userIdentity = identity;
      state.authenticated = true;
      state.logon = false;
    },
    logout(state) {
      state.userIdentity = null;
      state.authenticated = false;
      state.logon = false;
    },
    setActiveProfiles(state, profile) {
      state.activeProfiles = profile;
    },
    setRibbonOnProfiles(state, ribbon) {
      state.ribbonOnProfiles = ribbon;
    }
  }
};

• • data: Data utility services are defined here.
  • date: Date filters are defined here.
  • model: TypeScript model for entities.

The folder structure of the unit test code is also quite similar:

Now, we'll generate an entity for this application.