nenb example - using vue as a package

source file

Below is a data block, in toml format. It will be used as the data used to create the Vue object. The name attribute is set to myVueData.

message = "this message was generated by data"

Below is an html block with a render attribute set to vue, and a data attribute set to myVueData.

• the render attribute specifies that this block should not be rendered by the usual html renderer, but by the renderer vue-ssr, which will perform server-side rendering with vue server-side rendering.

• the data attribute specifies the name of the data to be used when creating the Vue object

<div id="my-vue-app">
  You're going to love this: {{ message }}
</div>

// const Vue = require('vue')
const Vue = require('vue/dist/vue.common.js')

Vue.config.devtools = true

var app = new Vue({
  el: '#my-vue-target-element',
  data: data.myVueData,
  template: data.myVueTemplate
})

<div id="my-vue-target-element"></div>

We've also embedded a css block to make the div pretty.

#my-vue-app {
  font-size: 200%;
  margin: 1em;
  border: thin solid #DDD;
  border-radius: 1em;
  padding: 1em;
  background-color: #DFD;
}