CODEWITHSUNDEEP
vue.js
yahermann
yahermann

Reputation: 1569

Using vue.js without NPM or CLI

I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.

This is a proof-of-concept before we invest in refactoring the entire frontend of the application.

The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:

<html>
  <head>
     ...
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     ...
  </head>
  <body>
  
    <div id="el">
      ... vue template ...
    </div>
  
    <script>
      ...
      var vm = new Vue({
        el : '#el',
        data : {
          config : <% config.json %>   // this is server-rendered, using server templating
          ...
        },
        ...
      });
      ...
    </script>

  </body>
</html>

The page does work. However, I get the following error/warning within the Vue console:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.

I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.

And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...

Thank you!

Upvotes: 0

Views: 290

Answers (2)

yahermann
yahermann

Reputation: 1569

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.

Upvotes: 0

Dieterg
Dieterg

Reputation: 16368

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>

Upvotes: 1

Related Questions