Skip to content

Create new Vue mount method

Mike Greiling requested to merge 42783-create-vue-mount-method into master

This utility function aims to reduce boilerplate that we use everywhere for mounting Vue components and it also standardizes a way to pass props from rails helpers.

Example:

Before:

import Vue from 'vue';
import DeployKeysApp from './components/app.vue';

new Vue({
  el: document.getElementById('js-deploy-keys'),
  components: {
    DeployKeysApp,
  },
  data() {
    return {
      endpoint: this.$options.el.dataset.endpoint,
    };
  },
  render(createElement) {
    return createElement('deploy-keys-app', {
      props: {
        endpoint: this.endpoint,
      },
    });
  },
}));

After:

import mount from '~/vue_shared/mount_vue_component';
import DeployKeysApp from './components/app.vue';

mount(DeployKeysApp, '#js-deploy-keys');

In this MR I've added the utility function and refactored three different instances where Vue is instantiated to show how this can reduce a lot of unnecessary code, standardize on a single method for passing initial props, and clean up our entry points.

Closes #42783 (moved)

Edited by Mike Greiling

Merge request reports