Skip to content

Create mount helper for Vue applications in HAML

When mounting Vue applications, we often have the following pattern in our frontend code:

new Vue({
    data: {
      boardsEndpoint: $boardApp.dataset.boardsEndpoint,
      listsEndpoint: $boardApp.dataset.listsEndpoint,
      boardId: $boardApp.dataset.boardId,
      disabled: parseBoolean($boardApp.dataset.disabled),
      issueLinkBase: $boardApp.dataset.issueLinkBase,
      rootPath: $boardApp.dataset.rootPath,
      bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
      detailIssue: boardsStore.detail,
      defaultAvatar: $boardApp.dataset.defaultAvatar,
    }
})

(taken from https://gitlab.com/gitlab-org/gitlab-ce/blob/ee74f7b8e5a4a4bdc84a2d50bd34a7bfa6463a3f/app/assets/javascripts/boards/index.js#L60-68)

However the root component already knows which data it expects from the dataset:

export default {
  props: {
    list: {
      type: Object,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      required: true,
    },
    issueLinkBase: {
      type: String,
      required: true,
    },
    rootPath: {
      type: String,
      required: true,
    },
    boardId: {
      type: String,
      required: true,
    },
  },
}

(taken from https://gitlab.com/gitlab-org/gitlab-ce/blob/ee74f7b8e5a4a4bdc84a2d50bd34a7bfa6463a3f/app/assets/javascripts/boards/components/board.js#L23-44)

We should take advantage of this and create a helper that automatically passes everything from dataset that is defined in props.