Sidebar-shortened.vue

<template lang="pug">
      b-button(v-if="!newProjectFormVisible" variant="secondary" @click="showNewProjectForm()") Projekt Hinzufügen
      form.new-project-form(v-else)
        input(v-model="newProjectName" type="text" maxlength="20" required)
        b-button(variant="primary" @click="createNewProject()") Projekt Hinzufügen
        b-button(variant="tertiary" @click="abortNewProject()") Abbrechen

</template>

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

  export default class Sidebar extends Vue {
    private newProjectFormVisible = false;
    private newProjectName = '';

    private showNewProjectForm() {
      this.newProjectFormVisible = true;
    }

    private abortNewProject() {
      this.newProjectFormVisible = false;
      this.newProjectName = '';
    }

    private createNewProject() {
      this.newProjectFormVisible = false;

      // create new project

      this.newProjectName = '';
    }
  }
</script>

Sidebar-updated.vue

<template lang="pug">
  .sidebar.w-25

      b-button.mt-2(v-if="!newProjectFormVisible" variant="secondary" @click="showNewProjectForm()") Projekt Hinzufügen
      .new-project-form.mt-2(v-if="newProjectFormVisible")
        input(v-model="newProjectColor" type='color')
        input.mb-1(v-model.trim="newProjectName" type="text" maxlength="20")
        b-button(variant="primary" @click="createNewProject()" :disabled="newProjectName && newProjectName.length === 0") Hinzufügen
        b-button(variant="tertiary" @click="abortNewProject()") Abbrechen

</template>

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

  export default class Sidebar extends Vue {
    public newProjectFormVisible: boolean = false;
    public newProjectName: string = '';
    public newProjectColor: string = '#e66465';

    public showNewProjectForm() {
      this.newProjectFormVisible = true;
    }

    public abortNewProject() {
      this.newProjectFormVisible = false;
      this.newProjectName = '';
    }

    public createNewProject() {
      this.newProjectFormVisible = false;
      this.$store.dispatch({type: 'createProject', payload: {name: this.newProjectName, color: this.newProjectColor}});
      this.newProjectName = '';
    }
  }
</script>