Prerender Vue.js 2.0 Component (similar To This.$compile In Vue 1)

I'm trying to make reusable components for gridstack. I cannot find a simple way to do something similar to this.$compile method from vue 1. I've seen this example. Here is my vu

Solution 1:

Using mount, you should be able to get what you need to pass to grid.addWidget.

First we want to turn the component into something we can construct.

const MyWidget = Vue.extend(DWidget);

Then, we can mount that constructor.

const mounted = new MyWidget().$mount();

My passing nothing to $mount(), it will not add the component to the DOM. We can get access to the element it generated using mounted.$el. I expect you should be able to pass that to addWidget.

grid.addWidget(mounted.$el, 0,0,1,1,true);

Solution 2:

So, as @Bert suggested I had to use mount. And his method works perfectly. And here is a resulting addWid () method, which actually works as reusable component:

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}

Hopefully it would be helpful to someone!