vue.js 2 migrate from legacy frontend to single file component

Question

So, ok, I'll get tons of downvotes for this, but since I haven't found any usable answers yet, I think it's worth a shot.

I am trying to migrate a legacy application as smoothly and as unobstrusively as possible to vue js.

I have started with a simple component without any further children components. I am building with webpack, by the way. So, here we go. It's a simple CRUD form.

There is no vue parent context, since this is going to be the first vue-component ever in this legacy app. I've gotten this far:

import SinglePageVue from './single-page.vue';

// creating vue component
Vue.component('single-page-comp', SinglePageVue);

// invoke view by calling container
vue = new Vue({ el: '#component-container' });

// *** At this point I'd like to assign the data to the component
// somwhat like. Of course, this doesn't work, but this is what
// I'd like to do
vue.props.givenName = 'John'
vue.props.familyName = 'Doe'

and there is also a submit event, which I the calling function needs to respond to, once the form is submitted.

// in the script section this would look like

module.exports = {
  data: function() {
    return {
      onSubmit: function () {
        // assignable by function
      }
    }
  }
};

};

How do I do that?

Answer 1

If you want to update data of a component in Vue, there are a number of ways to do it, but in this case I might suggest just creating a data object that you pass to the Vue instance, which can, again, pass it to your single page component.

console.clear()

const SinglePageVue = {
  props:["sharedData"],
  template:`
    <div>
      <h1>{{sharedData.message}}</h1>
    </div>
  `
}
Vue.component("single-page-vue", SinglePageVue)

const sharedData = {
  message: "I'm shared data"
}

new Vue({
  el:"#app",
  data:{
    sharedData
  }
})

setTimeout(() => sharedData.message = "I was updated", 1000)

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <single-page-vue :shared-data="sharedData"></single-page-vue>
</div>

Here, sharedData is an object in your page's scope that whatever legacy code you have can modify. Because sharedData is exposed as a data property of the Vue, it is now reactive and changes to it's properties will be reflected anywhere they are used.

This is basically a super bare bones state management solution. If you end up needing more you might want to investigate Vuex, but I've build several Vue projects with this kind of approach.