client

IMIS Vue.js Client

Project setup

Note: The specified commands assume the client directory as the working directory.

./gradlew yarn_install

Compiles and hot-reloads for development

./gradlew serve

Compiles and minifies for production

./gradlew buildFrontend

Run your unit tests

./gradlew test

Lints and fixes files

./gradlew lint

Stack and Best Practices

Libaries

We are using:

• Vue.js + Typescript
• VueX + vuex-smart-module
• Vue Router
• Ant Design
• swagger-typescript-api

Code Style / Linting

We have strict lint rules to ensure a consistent styling. Set your editor right and use the .editorconfig to make your life easier.

You can also use yarn lint --fix to resolve most lint errors

Server communication

We communicate with the server using REST. The documentation is generated by swagger. We are using the swagger-typescript-api package to automatically generate an API client as part of the build process (@/api/SwaggerApi.ts). You can re-generate this file by issuing ./gradlew generateClient. Do not edit this file manually, as changes will be overwritten during regeneration!

Basic Component:

Use Vue.extend for component definition and set lang="ts" in the script tag to get typescript support.

We found that class components do not work well with automatic type inference for vuex and is therefore not used.

<template>
  <div>Hello {{ name }}</div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'ExampleComponent',
  data() {
    return {
      name: 'World',
    },
  },
})
</script>

Component using VueX functionallity

We are using vuex-smart-module to get typesafty for our state management.

User component mappers to access the state functionallity.

You can orient yourself at existing modules our repository.

<template>
  <div v-if="this.user()">
    Logged in: {{ user.name }}
    <button @click="handleLogoutClick">Logout</button>
  </div>
  <div v-else>
    Nobody logged in
    <button @click="handleLoginClick">Login</button>
  </div>
  
</template>

<script lang="ts">
import Vue from 'vue'
import authMapper from '@/store/modules/auth.module'

export default Vue.extend({
  name: 'ExampleComponent',
  computed: {
    ...authMapper.mapGetters({
      user: 'user',
    }),
  },
  methods: {
    ...authMapper.mapActions({
      login: 'login',
      logout: 'logout',
    }),
    handleLoginClick() {
      this.login() // uses the action from the above .mapActions
    },
    handleLogoutClick() {
      this.logout()
    }
  },
})
</script>