Looks like using Vuejs for the GUI is not possible

danielkrah · November 8, 2020, 12:51am

Tried a minimal example to use vuejs for the gui

but the

{{}}

are used by octoprint and vuejs ...

:edit

<html>
<head>
  <title>Welcome to Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>§§ greeting §§</h1>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
      },
      methods: {
      },
      delimiters: ['§§','§§']
    })
  </script>
</body>
</html>

works ... so no vue ui frameworks ootb ...

jneilliii · November 8, 2020, 2:04am

I think this is utilized by the jinja i18n translation mechanism.

danielkrah · November 8, 2020, 2:06am

delimiters: ['§§','§§']

yeah i got a solution.
Now i have to figure out to get the data from octoprint to vue

jneilliii · November 8, 2020, 2:50am

I'm not familiar with vue.js, but there are a couple of options I can think of. API polling, which is probably not preferred, or creating a websocket to octoprint. You might be able to include the octoprint js client in your page and then use the standard callbacks that are available to plugin's now.

Stefan_Cohen · November 8, 2020, 9:13am

The socket route is pretty straight forward. I believe the client is injected by OP by default so you should be able to simply:

OctoPrint.socket.connect();

When the app is loaded, and then:

OctoPrint.socket.onMessage("plugin", function (message) {
        if (message.data.plugin == "myplugin") {
            //Do your thing
        }
    });

And yes. there is a clash with the default delimiters so you need to set custom delimiters in your vue.

new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],

Charlie_Powell · November 8, 2020, 12:56pm

While changing the delimiters is probably the better option, there is also a way to escape the templating from Jinja:

danielkrah · November 8, 2020, 7:16pm

So i figured it out how it is do able

I want to use Vuejs 3 and the composition api.

Flask is only injecting properties into jinja files which wouldn't be a great problem.
So i can't easily divide the javascript and html into 2 files.

Oh and i have to rebuild my component as plain vue components. actually they are made to work with nuxt. But implemented in vuejs2 and not really in a great way

It should look like

jneilliii · November 9, 2020, 3:20am

I like the expected look, it's a re-creation of pronterface interface.

danielkrah · November 9, 2020, 10:17am

Yes, just with svg so it is fully scaleable
The colors can be set with probs.