Looks like using Vuejs for the GUI is not possible

Tried a minimal example to use vuejs for the gui

but the


are used by octoprint and vuejs ...


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

    var app = new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
      methods: {
      delimiters: ['§§','§§']

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

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

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

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

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.

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


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: ['[[', ']]'],

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

1 Like

So i figured it out how it is do able :smiley:

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

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

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