Working on a project involves fixing issues with legacy components in a server-rendered web page. I proposed rewriting these parts in Vue to facilitate our migration, and the team approved.
I created a mini-app using the Webpack template from Vue CLI, which functions perfectly within its specific environment. After running npm run build, the built index.html also works well on a static server.
The challenge arises when trying to integrate the app into an existing page containing various elements. I expected adding the
<div id='myApp'></div>In case it helps, the legacy app is a Rails app utilizing .erb templates, and the JS files are being loaded through the main pipeline in application.js.
Edit: additional details - this is how main.js appears before building:
/* eslint-disable */
import Vue from 'vue'
// UI components
import VueSelect from 'vue-select'
import DynamicForm from './components/DynamicForm/'
Vue.component('vue-select', VueSelect)
Vue.config.productionTip = false
const DynamicForms = new Vue({
el: '.dynamic-form',
render: h => h(DynamicForm)
})
Edit: Successfully integrated Vue with Webpacker in Rails, but encountering context-related issues:
This is my main.js within one of the Vue components. It was functioning properly until attempting to use PropData for reusability with different data sets in multiple instances.
/* eslint-disable */
import Vue from 'vue'
// UI components
import VueSelect from 'vue-select'
// import 'nouislider'
import DynamicForm from './components/DynamicForm/'
import fields from './fields'
import fieldRules from './field-rules'
Vue.component('vue-select', VueSelect)
Vue.config.productionTip = false
document.addEventListener('DOMContentLoaded', () => {
const el = document.createElement('div')
document.querySelector('.dynamic-form').appendChild(el)
const vm = new DynamicForm({
propsData: {
fields,
fieldRules
},
el,
render: h => h(DynamicForm)
})
})
This is DynamicForm/index.vue
<template>
<div id='app'>
<ParamList :fields='paramFields' :fieldRules='paramRules'></ParamList>
<Output></Output>
</div>
</template>
<script>
import Vue from 'vue'
import ParamList from './ParamList'
import Output from './Output'
export default Vue.extend({
props: [ 'fields', 'fieldRules' ],
name: 'DynamicForm',
components: {
ParamList,
Output
},
data () {
return {
paramFields: this.fields,
paramRules: this.fieldRules
}
}
})
</script>
<style>
</style>
The field and fieldData props contain JSON/JSONP data used within the components. The goal is to easily switch out the data by modifying only the field and fieldData when initializing the Vue instance. What could be the issue here?