Create new Vue mount method
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