Embedding Knockout components within a Vue app
When I first got my feet wet developing web applications about five years ago I quickly figured I needed to go the SPA way as that was the way I could implement all the futuristic visions we had at the time. Now several years later the JS ecosystem has evolved further, and while the technology we used back in the days still works fine, there are many reasons to switch to a newer platform. Shiny features everywhere!
With this background I have gotten on a long due adventure to figure out whether it was possible to use Knockout components within a Vue application. The idea is that we could rewrite the shell using Vue in order to get much of these new shiny features, while still reusing the existing components in order to prevent having to rebuild the whole app. Note that this ‘shell’ was previously provided through the use of Durandal.
Knockout is in itself - thankfully - a library which can be used wherever you have javascript and a DOM. The next thing you would want to make sure is that the components and their dependencies can easily be moved to your new Vue application.
Getting Knockout components to render within Vue
Our goal is to be able to render a Knockout view and model within a wrapper. This wrapepr is a Vue component which accepts an argument which contains the view/model. In my case this combination was mostly coupled together.
We’ll call this wrapper the KnockoutFrame. This component has the following definition:
<template>
<span></span>
</template>
<script>
import ko from "knockout";
export default {
props: ["component"],
mounted() {
this.$el.innerHTML = this.component.template;
ko.applyBindings(this.component, this.$el);
}
};
</script>
One of the important things to keep in the back of your head is that Vue uses a virtual DOM, while Knockout does not. The direct result of this is that it’s fairly complex to mix usage of Knockout and Vue, but that’s not our goal anyway.