Using vue.js without NPM or CLI

Question

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!

Since it's just a proof of concept and your page still works, I would just ignore the warning. If you want to mute that warning, set the script type to application/javascript (workaround). You could also mute all warnings using the production build of Vue: <script src=".../dist/vue.min.js">. — tony19
– tony19, Commented Jan 3, 2020 at 1:37
@tony19, thanks for the reply. setting script type to application/javascript puts the browser into some sort of endless loop. I'm not sure why. script by itself or with the obsolete type text/javascript works (but yields the warning). — yahermann
– yahermann, Commented Jan 3, 2020 at 2:29

Dieterg · Accepted Answer · 2020-01-03 06:40:39Z

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>

answered Jan 3, 2020 at 6:40

Dieterg

16.4k3 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

yahermann Over a year ago

Thank you for pointing out this technique. Will definitely keep it in mind! I tried it in this case, but I continue getting the warning. Basically any <script> tag that contains code appears to trigger the warning, even though said <script> tag is outside of vm.$el. I wonder if this is a bug?

tony19 Over a year ago

@yahermann fyi: <style> and <script> tags trigger the warning

yahermann Over a year ago

@tony19, yep, and it feels like a bug, because the style & script tags only occur outside of the Vue root element and components (but within <body>...</body>. I'm living with the errors/warnings for now, but do wish I could mute them!

tony19 Over a year ago

I think that bug is unlikely, since Vue only evaluates tags inside the specified element. But feel free to file a GitHub issue with a reproducible example. To mute the warnings, have you tried the production build as I suggested?

yahermann Over a year ago

@tony19, you were right. There was another bug. See my answer below.

yahermann · Accepted Answer · 2020-01-06 18:43:51Z

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.

answered Jan 6, 2020 at 18:43

yahermann

1,5971 gold badge13 silver badges34 bronze badges

Collectives™ on Stack Overflow

Using vue.js without NPM or CLI

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related