Django + Vue.js + SSR

Question

I'm facing interesting problem...

I do have a form separated into steps - like wizard. Each step (even the 1st one) is loaded from server, where sits Django. The wizard itself is Vue component. Everything works fine together but now I would like to add a component into HTML, that is returned from server. The thing is Wizard (Vue) can only display HTML loaded from server, it cannot parse incomming HTML for new components and instantiate them. This is the point where I remembered Server Side Rendering.

My question is where to start if I wanna render the template that is rendered by Django render again via Vue.

Maybe there is nother approach. All I want is to have another rich component in my incomming form not just dumb HTML.

Thank you.

Answer 1

I've written following:

td(v-if="v && v.component")
    component(:is="v.component", v-bind="v.props")
td(:class="getClass(v)", v-html="getHTML(v)", v-else)

Where:

• v - object that comes from server
• v.component - name of the component I want to render - i.e. - "cool-button"
• v.props - inner object with params for component from v.component

The snippet rendes component of just plain HTML to my td.