[Vuejs]-Using vue.js without NPM or CLI

0👍

✅

Grrr, after several days after enduring this error, I discovered this:

<fieldset id="el">
  ...
  <div id="el">
  ...
  </div>
  ...
</fieldset>

So the issue was repeating #el within same page.

My mistake.

Just wish the error message emitted by Vue had been a bit more useful!

Bottom line: The pattern described in the origional question works just fine without NPM/CLI.

1👍

One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/… all use this approach.

window.__STATE__ = <% config.json %>

In your JS file you can then refer to the window.__STATE__ object.

var vm = new Vue({
   el: '#el',
   data: {
     config: window.__STATE__
   }
})

Ofcourse the order is important here:

<body>
  <script>
    window.__STATE__ = <% config.json %>
  </script>
  <script src="app.js"></script>
</body>