Now, let's learn how to create an entity using the JHipster entity generator with a Vue.js client-side. We will create a simple employee entity with the name, age, and date of birth fields, just like we did for the React app earlier:

1. Open a Terminal, navigate to the folder of the Vue.js app, and run jhipster entity employee.
2. Create the fields one by one, select Yes for the question Do you want to add a field to your entity?, and fill in the name of the field with name for the next question, What is the name of your field?

3. Select String as the field type for the next question, What is the type of your field?
4. For the question Which validation rules do you want to add?, choose Required for the name field and proceed.
5. Continue this process for the age and dob fields. age is of the integer type, while dob is of the instant type.
6. When asked again, Do you want to add a field to your entity?, choose No.
7. For the next question, Do you want to add a relationship to another entity?, choose yes.
8. Provide user as the name of the other entity, and as the name of the relationship for the questions that follow.
9. For the next question, What is the type of the relationship?, we'll create a one-to-one relationship with the user.
10. Choose no for the next two questions and no again when asked to add another relationship.
11. For the questions that follow, select the default options and proceed.
    The jhipster entity employee command will produce the following console output:

Using JHipster version installed globally
Executing jhipster:entity employee
Options:

The entity employee is being created.

...

================= Employee =================
Fields
name (String) required
age (Integer) 
dob (Instant) 

Relationships
user (User) one-to-one 

? Do you want to use separate service class for your business logic? No, the REST controller should use the repository directly
? Is this entity read-only? No
? Do you want pagination on your entity? No

Everything is configured, generating the entity...

     info Using blueprint generator-jhipster-vuejs for entity-client 
      subgenerator
...

JHipster will generate the entity and run the webpack build. From the logs, you will see that the Vue.js blueprint is being used here.

12. If your server is not running, start it in a Terminal by running ./gradlew. If it is already running, then just compile the new code by running ./gradlew compileJava; Spring DevTools will restart the app automatically.
13. Start BrowserSync in another Terminal by running npm start and check the employee entity we just created:

14. Create an entity to check that everything works fine:

Now, let's see what happens once we've created the entity:

• For the entity we created, JHipster generated/updated the following files:

• On the Vue.js client-side, we have the following files:

src/main/webapp/app/entities/employee/employee-details.vue
src/main/webapp/app/entities/employee/employee.vue
src/main/webapp/app/entities/employee/employee-update.vue
src/main/webapp/app/entities/employee/employee-details.component.ts
src/main/webapp/app/entities/employee/employee.component.ts
src/main/webapp/app/entities/employee/employee.service.ts
src/main/webapp/app/shared/model/employee.model.ts
src/main/webapp/app/entities/employee/employee-update.component.ts
src/test/javascript/spec/app/entities/employee/employee.component.spec.ts
src/test/javascript/spec/app/entities/employee/employee-details.component.spec.ts
src/test/javascript/spec/app/entities/employee/employee.service.spec.ts
src/test/javascript/spec/app/entities/employee/employee-update.component.spec.ts
src/test/javascript/e2e/entities/employee/employee.page-object.ts
src/test/javascript/e2e/entities/employee/employee.spec.ts
src/test/javascript/e2e/entities/employee/employee-details.page-object.ts
src/test/javascript/e2e/entities/employee/employee-update.page-object.ts

• The routes for the entity are updated in the router/index.ts file:

const Employee = () => import('../entities/employee/employee.vue');
const EmployeeUpdate = () => import('../entities/employee/employee-update.vue');
const EmployeeDetails = () => import('../entities/employee/employee-details.vue');

• The employee.service.ts file declares the services that are required for the entities to communicate with the backend server. The following code block shows this:

...
const baseApiUrl = 'api/employees';

export default class EmployeeService {
  public find(id: number): Promise<IEmployee> {
    return new Promise<IEmployee>(resolve => {
      axios.get(`${baseApiUrl}/${id}`).then(function(res) {
        resolve(res.data);
      });
    });
  }

  public retrieve(): Promise<any> {
    return new Promise<any>(resolve => {
      axios.get(baseApiUrl).then(function(res) {
        resolve(res);
      });
    });
  }

  public delete(id: number): Promise<any> {
    return new Promise<any>(resolve => {
      axios.delete(`${baseApiUrl}/${id}`).then(function(res) {
        resolve(res);
      });
    });
  }

  public create(entity: IEmployee): Promise<IEmployee> {
    return new Promise<IEmployee>(resolve => {
      axios.post(`${baseApiUrl}`, entity).then(function(res) {
        resolve(res.data);
      });
    });
  }

  public update(entity: IEmployee): Promise<IEmployee> {
    return new Promise<IEmployee>(resolve => {
      axios.put(`${baseApiUrl}`, entity).then(function(res) {
        resolve(res.data);
      });
    });
  }
}

• employee.component.ts, employee-update.component.ts, and employee-detail.component.ts declare the entity listing, entity update, and entity detail pages, respectively. Let's look at employee.component.ts. Here, we define the component and extend it with the required mixins. We also inject the required services, followed by the component methods that will be used by the template:

...
@Component
export default class Employee extends mixins(Vue2Filters.mixin, AlertMixin) {
  @Inject('employeeService') 
  private employeeService: () => EmployeeService;
  private removeId: number = null;
  public employees: IEmployee[] = [];
  public isFetching = false;

  public mounted(): void {
    this.retrieveAllEmployees();
  }

  public clear(): void {
    this.retrieveAllEmployees();
  }

  public retrieveAllEmployees(): void {
    ...
  }

  public prepareRemove(instance: IEmployee): void {
    this.removeId = instance.id;
  }

  public removeEmployee(): void {
    ...
  }

  public closeDialog(): void {
    (<any>this.$refs.removeEntity).hide();
  }
}

The other components also follow a similar approach. Code wise, the Vue.js code is more similar to our Angular implementation.