use JSON data in a script tag for initial state, rather than janky data attributes

njktags/vue.js

@@ -58,10 +58,6 @@ module.exports = function(nunjucksEngine, settings) {
       }).code
     ).default;
 
-    const renderer = VueServerRenderer.createRenderer({
-      template: `<!--vue-ssr-outlet-->`
-    });
-
     moduleScript.template = parsedComponent.template.content;
 
     if ("vue" in manifest && manifest.vue[args.component]) {
@@ -83,18 +79,29 @@ module.exports = function(nunjucksEngine, settings) {
       });
     }
 
-    renderer.renderToString(
-      new Vue({
-        props: keys,
-        template: `<${args.component}${props}></${args.component}>`
-      }),
-      (err, result) => {
-        if (!err) {
-          callback(null, new nunjucksEngine.runtime.SafeString(result));
-        } else {
-          callback(null, err);
-        }
+    let vueInstance = new Vue({
+      props: keys,
+      template: `<${args.component}${props}></${args.component}>`
+    });
+
+    const renderer = VueServerRenderer.createRenderer({
+      template: `<!--vue-ssr-outlet-->`
+    });
+
+    renderer.renderToString(vueInstance, (err, result) => {
+      if (!err) {
+        const component = vueInstance.$children[0],
+          props = component.$vnode.componentOptions.propsData;
+        let componentState = `<script type="application/json">${JSON.stringify(
+          props
+        )}</script>`;
+        callback(
+          null,
+          new nunjucksEngine.runtime.SafeString(result + componentState)
+        );
+      } else {
+        callback(null, err);
       }
-    );
+    });
   };
 };

src/js/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <p class="HelloWorld" v-bind:data-message="message">
+  <p class="HelloWorld">
     {{ message }}
   </p>
 </template>

src/js/components/ListComp.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="ListComp" v-bind:data-startlist="startlist">
+  <div class="ListComp">
     <ol>
       <li v-for="(item, index) in list">
         <div class="itemtext">

src/js/components/RecordPlayer.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="RecordPlayer" v-bind:data-record="recordUrl">
+  <div class="RecordPlayer">
     <button class="toggle" v-on:click="togglePlay">
       <svg v-if="playing === false">
         <use :xlink:href="playIcon" />

src/js/main.js

@@ -7,7 +7,8 @@ Array.prototype.forEach.call(document.querySelectorAll(".HelloWorld"), function(
   elem
 ) {
   new Vue({
-    render: h => h(HelloWorld, { props: { message: elem.dataset.message } })
+    render: h =>
+      h(HelloWorld, { props: JSON.parse(elem.nextElementSibling.innerHTML) })
   }).$mount(elem);
 });
 
@@ -15,7 +16,8 @@ Array.prototype.forEach.call(document.querySelectorAll(".ListComp"), function(
   elem
 ) {
   new Vue({
-    render: h => h(ListComp, { props: { startlist: elem.dataset.startlist } })
+    render: h =>
+      h(ListComp, { props: JSON.parse(elem.nextElementSibling.innerHTML) })
   }).$mount(elem);
 });
 
@@ -23,7 +25,10 @@ Array.prototype.forEach.call(
   document.querySelectorAll(".RecordPlayer"),
   function(elem) {
     new Vue({
-      render: h => h(RecordPlayer, { props: { record: elem.dataset.record } })
+      render: h =>
+        h(RecordPlayer, {
+          props: JSON.parse(elem.nextElementSibling.innerHTML)
+        })
     }).$mount(elem);
   }
 );