From 1af967371062ddeab29ea961df8ffd6fe324da03 Mon Sep 17 00:00:00 2001
From: Lars van Rhijn <38525109+KiOui@users.noreply.github.com>
Date: Thu, 7 Sep 2023 13:51:37 +0200
Subject: [PATCH] Rewrite VueJS to use script module type (#497)

* Rewrite VueJS to use script module type

* Use window property for global variables
---
 .../templates/orders/order_admin_list.html    | 70 ++++++++++---------
 .../templates/orders/order_admin_order.html   |  8 +--
 .../orders/templates/orders/order_list.html   | 42 +++++------
 .../templates/orders/shift_admin_footer.html  | 18 ++---
 .../templates/orders/shift_admin_scanner.html | 26 ++++---
 .../orders/templates/orders/shift_header.html | 20 +++---
 .../thaliedje/templates/thaliedje/player.html | 68 +++++++++---------
 .../thaliedje/templates/thaliedje/queue.html  | 26 +++----
 .../templates/thaliedje/requests.html         | 26 +++----
 .../thaliedje/templates/thaliedje/search.html | 36 +++++-----
 website/tosti/templates/tosti/base.html       | 11 ++-
 11 files changed, 188 insertions(+), 163 deletions(-)

diff --git a/website/orders/templates/orders/order_admin_list.html b/website/orders/templates/orders/order_admin_list.html
index 9057d3cf..82f9dc51 100644
--- a/website/orders/templates/orders/order_admin_list.html
+++ b/website/orders/templates/orders/order_admin_list.html
@@ -37,9 +37,9 @@
                 <transition-group name="orders-scanned-list" tag="ul" class="item-orders">
                     <li v-for="(order, index) in orders_scanned" :key="`order_scanned_${order.id}`" class="pt-2 pb-2 item-list">
                         <div class="information-row">
-                            <p class="item-counter"><% index + 1 %>.</p>
-                            <p class="item-name"><% order.product.name %> (€<% (Math.round(order.order_price * 100) /
-                                100).toFixed(2) %>)</p>
+                            <p class="item-counter">${ index + 1 }$.</p>
+                            <p class="item-name">${ order.product.name }$ (€${ (Math.round(order.order_price * 100) /
+                                100).toFixed(2) }$)</p>
                             <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
                             <div class="flex-divider"></div>
                             <i class="item-username fa-solid fa-desktop"></i>
@@ -64,7 +64,7 @@
                         {% include 'orders/order_admin_order.html' %}
                     </li>
                 </transition-group>
-                <div v-else id="outer" class="container d-flex align-items-center justify-content-center text-center"
+                <div v-if="orders_finished.length === 0" id="outer" class="container d-flex align-items-center justify-content-center text-center"
                      style="height:200px;">
                     <div id="inner">
                         No finished orders yet...
@@ -76,8 +76,8 @@
                     <h3>Orders to make</h3>
                     <template v-if="Object.keys(orders_to_make_grouped).length > 0">
                         <p v-for="(product_dict, product_name) in orders_to_make_grouped" class="mb-2" style="font-size: 1em;">
-                            <% product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i>
-                            &times; <% product_dict.amount %></p>
+                            ${ product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i>
+                            &times; ${ product_dict.amount }$</p>
                     </template>
                     <template v-else>
                         <p class="mb-2" style="font-size: 1em;">No open products.</p>
@@ -85,9 +85,9 @@ <h3>Orders to make</h3>
                     <hr>
                     <h3 class="mt-3">Orders ready</h3>
                     <template v-if="Object.keys(orders_ready_grouped).length > 0">
-                        <p v-for="(product_dict, product_name) in orders_ready_grouped" class="mb-2" style="font-size: 1em;"><%
-                            product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
-                            <% product_dict.amount %></p>
+                        <p v-for="(product_dict, product_name) in orders_ready_grouped" class="mb-2" style="font-size: 1em;">${
+                            product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
+                            ${ product_dict.amount }$</p>
                     </template>
                     <template v-else>
                         <p class="mb-2" style="font-size: 1em;">No ready products.</p>
@@ -95,9 +95,9 @@ <h3 class="mt-3">Orders ready</h3>
                     <hr>
                     <h3 class="mt-3">Orders total</h3>
                     <template v-if="Object.keys(orders_grouped).length > 0">
-                        <p v-for="(product_dict, product_name) in orders_grouped" class="mb-2" style="font-size: 1em;"><%
-                            product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
-                            <% product_dict.amount %></p>
+                        <p v-for="(product_dict, product_name) in orders_grouped" class="mb-2" style="font-size: 1em;">${
+                            product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
+                            ${ product_dict.amount }$</p>
                     </template>
                     <template v-else>
                         <p class="mb-2" style="font-size: 1em;">No products.</p>
@@ -128,16 +128,18 @@ <h3 class="mt-3">Orders total</h3>
     }
 </style>
 
-<script>
-    let orders_vue_{{ shift.id }} = new Vue({
-        el: '#item-orders-{{ shift.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            orders: [],
-            shift: {},
-            products: [],
-            user: null,
-            addingOrder: false,
+<script type="module">
+    import { createApp } from 'vue';
+    window.orders_vue_{{ shift.id }} = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                orders: [],
+                shift: {},
+                products: [],
+                user: null,
+                addingOrder: false,
+            }
         },
         created() {
              fetch('{% url "v1:me" %}')
@@ -174,27 +176,27 @@ <h3 class="mt-3">Orders total</h3>
             }
         },
         computed: {
-            user_orders: function() {
+            user_orders() {
                 let userCopy = this.user;
                 return this.orders.filter(function(order) {
                     return userCopy === null || (order.user !== null && order.user.id === userCopy.id);
                 });
             },
-            user_orders_with_shift_restrictions: function() {
+            user_orders_with_shift_restrictions() {
                 let userCopy = this.user;
                 return this.orders.filter(function(order) {
                     return userCopy === null || (order.user !== null && order.user.id === userCopy.id && !order.product.ignore_shift_restrictions);
                 });
             },
-            orders_with_shift_restrictions: function() {
+            orders_with_shift_restrictions() {
                 return this.orders.filter(function(order) {
                     return !order.product.ignore_shift_restrictions;
                 });
             },
-            orders_to_make: function() {
+            orders_to_make() {
                 return this.orders.filter(order => !order.ready);
             },
-            orders_to_make_grouped: function () {
+            orders_to_make_grouped() {
                 let orders_to_make = {};
                 this.orders_to_make.forEach(order => {
                     if (order.product.name in orders_to_make) {
@@ -205,10 +207,10 @@ <h3 class="mt-3">Orders total</h3>
                 });
                 return orders_to_make;
             },
-            orders_ready: function() {
+            orders_ready() {
                 return this.orders.filter(order => order.ready);
             },
-            orders_ready_grouped: function () {
+            orders_ready_grouped() {
                 let orders_ready = {};
                 this.orders_ready.forEach(order => {
                     if (order.product.name in orders_ready) {
@@ -219,7 +221,7 @@ <h3 class="mt-3">Orders total</h3>
                 });
                 return orders_ready;
             },
-            orders_grouped: function () {
+            orders_grouped() {
                 let orders_total = {};
                 this.orders.forEach(order => {
                     if (order.product.name in orders_total) {
@@ -230,13 +232,13 @@ <h3 class="mt-3">Orders total</h3>
                 });
                 return orders_total;
             },
-            orders_finished: function() {
+            orders_finished() {
                 return this.orders.filter(order => order.ready && order.paid && order.type !== 1);
             },
-            orders_to_process: function() {
+            orders_to_process() {
                 return this.orders.filter(order => !order.ready || !order.paid && order.type !== 1);
             },
-            orders_scanned: function() {
+            orders_scanned() {
                 return this.orders.filter(order => order.type === 1);
             }
         },
@@ -373,7 +375,7 @@ <h3 class="mt-3">Orders total</h3>
                 }
             }
         }
-    });
+    }).mount('#item-orders-{{ shift.id }}');
 
     function process_refreshed_order_data(data) {
         orders_vue_{{ shift.id }}.orders = data;
diff --git a/website/orders/templates/orders/order_admin_order.html b/website/orders/templates/orders/order_admin_order.html
index 25dfd8e8..159fd164 100644
--- a/website/orders/templates/orders/order_admin_order.html
+++ b/website/orders/templates/orders/order_admin_order.html
@@ -1,8 +1,8 @@
 <ul class="row w-100">
     <div class="col-auto d-inline-flex">
-        <p class="item-counter"><% index + 1 %>.</p>
-        <p class="item-name"><% order.product.name %> (€<% (Math.round(order.order_price * 100) /
-        100).toFixed(2) %>)</p>
+        <p class="item-counter">${ index + 1 }$.</p>
+        <p class="item-name">${ order.product.name }$ (€${ (Math.round(order.order_price * 100) /
+        100).toFixed(2) }$)</p>
         <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
     </div>
     <div class="col d-inline-flex" style="min-width: 0">
@@ -10,7 +10,7 @@
         <p v-if="order.user !== null" class="text-truncate" style="min-width: 0">
               <i v-if="order.user !== null && {{ user.id }} === order.user.id"
                class="fa-solid fa-user fa-xs"></i>
-              <% order.user.first_name %> <% order.user.last_name %>
+              ${ order.user.first_name }$ ${ order.user.last_name }$
        </p>
        <p><a target="_blank" :href="`{% url 'admin:orders_order_changelist' %}${order.id}/change/`"><i class="fa-solid fa-pen-to-square fa-xs text-white"></i></a></p>
     </div>
diff --git a/website/orders/templates/orders/order_list.html b/website/orders/templates/orders/order_list.html
index ef28768e..1bdc2f40 100644
--- a/website/orders/templates/orders/order_list.html
+++ b/website/orders/templates/orders/order_list.html
@@ -7,15 +7,15 @@
     <div v-if="!shift.finalized && shift.can_order && shift.is_active">
         <h5>Place your order:</h5>
         <div class="row row-cols-2 row-cols-md-4 justify-content-center align-items-stretch">
-            <div class="col mb-3 d-flex justify-content-center align-items-stretch" v-for="product in products">
+            <div v-for="product in products" class="col mb-3 d-flex justify-content-center align-items-stretch">
                 <div class="flex-grow-1">
                     <button class="btn btn-lg btn-ml m-auto cursor-pointer btn-on d-flex flex-column align-items-center" style="border-radius: 0; max-width: unset;"
                         :class="{ disabled: addingOrder || orders.length >= shift.max_orders_total || user_orders_with_shift_restrictions.length >= shift.max_orders_per_user && !product.ignore_shift_restrictions || product.max_allowed_per_shift !== null && user_orders_with_product_id(product.id).length >= product.max_allowed_per_shift }"
                         v-on:click="add_order(product)"
                     >
                         <span :class="{ invisible: addingOrder }"><i v-if="product.icon !== null" :class="`fa-solid fa-${product.icon} me-2`"></i></span>
-                        <span :class="{ invisible: addingOrder }">Order <% product.name %></span>
-                        <span class="small" :class="{ invisible: addingOrder }"><% format_price(product.current_price) %></span>
+                        <span :class="{ invisible: addingOrder }">Order ${ product.name }$</span>
+                        <span class="small" :class="{ invisible: addingOrder }">${ format_price(product.current_price) }$</span>
                     </button>
                     <div class="card-footer rounded-bottom text-center"
                          v-if="orders.length >= shift.max_orders_total || user_orders_with_shift_restrictions.length >= shift.max_orders_per_user && !product.ignore_shift_restrictions || product.max_allowed_per_shift !== null && user_orders_with_product_id(product.id).length >= product.max_allowed_per_shift"
@@ -47,8 +47,8 @@ <h5>Place your order:</h5>
         <transition-group name="orderlist" tag="ul" class="item-orders">
             <li v-for="(order, index) of orders" :key="`orderlist_order_${order.id}`" class="pt-2 pb-2 item-list" :class="{ 'user-order-background': (order.user !== null && {{ user.id }} === order.user.id)}">
                 <div class="information-row">
-                    <p class="item-counter"><% index + 1 %>.</p>
-                    <p class="item-name"><% order.product.name %> (<% format_price(order.order_price) %>)</p>
+                    <p class="item-counter">${ index + 1 }$.</p>
+                    <p class="item-name">${ order.product.name }$ (${ format_price(order.order_price) }$)</p>
                     <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
                     <div>
                         <span v-if="!order.paid && order.user !== null && {{ user.id }} === order.user.id" class="badge rounded-pill bg-danger" style="max-height: fit-content;">Not paid</span>
@@ -58,7 +58,7 @@ <h5>Place your order:</h5>
                         <i v-if="order.user !== null && {{ user.id }} === order.user.id && order.deprioritize === false"
                             class="fa-solid fa-arrow-down-short-wide" style="font-size: 1.5em; cursor: pointer;" v-on:click="order_to_bottom_of_list(order)"></i>
                         <p v-if="order.type === 0" class="item-username">
-                            <template v-if="order.user !== null"><% order.user.first_name %></template>
+                            <template v-if="order.user !== null">${ order.user.first_name }$</template>
                         </p>
                         <i v-else class="item-username fa-solid fa-desktop"></i>
                     </div>
@@ -95,16 +95,18 @@ <h5>Place your order:</h5>
     }
 </style>
 
-<script>
-    let orders_vue_{{ shift.id }} = new Vue({
-        el: '#item-orders-{{ shift.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            orders: [],
-            shift: {},
-            products: [],
-            user: null,
-            addingOrder: false,
+<script type="module">
+    import { createApp } from 'vue';
+    let orders_vue_{{ shift.id }} = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                orders: [],
+                shift: {},
+                products: [],
+                user: null,
+                addingOrder: false,
+            }
         },
         watch: {
             shift: {
@@ -127,19 +129,19 @@ <h5>Place your order:</h5>
             add_refresh_url("{% url "v1:shift_retrieveupdate" pk=shift.id %}", process_shift_data);
         },
         computed: {
-             user_orders: function() {
+             user_orders() {
                  let userCopy = this.user;
                  return this.orders.filter(function(order) {
                      return userCopy === null || (order.user !== null && order.user.id === userCopy.id);
                  });
              },
-             user_orders_with_shift_restrictions: function() {
+             user_orders_with_shift_restrictions() {
                  let userCopy = this.user;
                  return this.orders.filter(function(order) {
                      return userCopy === null || (order.user !== null && order.user.id === userCopy.id && !order.product.ignore_shift_restrictions);
                  });
              },
-             orders_with_shift_restrictions: function() {
+             orders_with_shift_restrictions() {
                  return this.orders.filter(function(order) {
                      return !order.product.ignore_shift_restrictions;
                  });
@@ -238,7 +240,7 @@ <h5>Place your order:</h5>
                 }
             },
         }
-    });
+    }).mount('#item-orders-{{ shift.id }}');
 
     function process_refreshed_order_data(data) {
         data = data.filter(order => order.type === 0);
diff --git a/website/orders/templates/orders/shift_admin_footer.html b/website/orders/templates/orders/shift_admin_footer.html
index b9068e95..a5096792 100644
--- a/website/orders/templates/orders/shift_admin_footer.html
+++ b/website/orders/templates/orders/shift_admin_footer.html
@@ -93,13 +93,15 @@
     </footer>
 </div>
 
-<script>
-    let admin_footer_vue_{{ shift.id }} = new Vue({
-        el: '#admin-footer-wrapper-{{ shift.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            orders: [],
-            shift: {},
+<script type="module">
+    import { createApp } from 'vue';
+    window.admin_footer_vue_{{ shift.id }} = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                orders: [],
+                shift: {},
+            }
         },
         created() {
             fetch('{% url "v1:orders_listcreate" shift=shift %}')
@@ -242,7 +244,7 @@
                 }
             }
         }
-    });
+    }).mount('#admin-footer-wrapper-{{ shift.id }}');
 
     function process_refresh_order_footer_data(data) {
         admin_footer_vue_{{ shift.id }}.orders = data;
diff --git a/website/orders/templates/orders/shift_admin_scanner.html b/website/orders/templates/orders/shift_admin_scanner.html
index 922a4aea..ca9d65fb 100644
--- a/website/orders/templates/orders/shift_admin_scanner.html
+++ b/website/orders/templates/orders/shift_admin_scanner.html
@@ -15,8 +15,8 @@
                         <template v-if="search_input !== ''">
                             <div v-if="search_results.length > 0" class="py-3" id="search-results">
                                 <div v-for="product in search_results" class="search-item pb-2">
-                                    <p class="search-item-name"><% product.name %></p>
-                                    <p class="search-item-price"><% format_price(product.current_price) %></p>
+                                    <p class="search-item-name">${ product.name }$</p>
+                                    <p class="search-item-price">${ format_price(product.current_price) }$</p>
                                     <input type="button" class="btn btn-success" v-on:click="add_order(product)" value="Add"/>
                                 </div>
                             </div>
@@ -48,14 +48,18 @@
 
 <script>
     const POPUP_MODAL_ID = "scanner-popup";
-    let scanner_vue = new Vue({
-        el: '#scanner-wrapper-{{ shift.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            shift: {},
-            search_results: [],
-            search_input: "",
-            typing_timer: null,
+</script>
+<script type="module">
+    import { createApp } from 'vue';
+    window.scanner_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                shift: {},
+                search_results: [],
+                search_input: "",
+                typing_timer: null,
+            }
         },
         watch: {
             search_input: {
@@ -157,7 +161,7 @@
                 }).catch(error => show_error_from_api(error));
             }
         }
-    });
+    }).mount('#scanner-wrapper-{{ shift.id }}');
 
     function process_refresh_scanner_data(data) {
         scanner_vue.shift = data;
diff --git a/website/orders/templates/orders/shift_header.html b/website/orders/templates/orders/shift_header.html
index 489d906f..6c3f89bd 100644
--- a/website/orders/templates/orders/shift_header.html
+++ b/website/orders/templates/orders/shift_header.html
@@ -1,11 +1,11 @@
 <div class="container-sm mb-2 mt-5 text-center" id="shift-header-container-{{ shift.id }}">
     <h1>{{ shift.venue.venue.name }}</h1>
     <p class="my-4 mx-auto" style="font-size: 1rem; max-width: 400px;">
-        shift #{{ shift.pk }} - <% shift.amount_of_orders %>/<% shift.max_orders_total %> - <% start_end_time %><br>
+        shift #{{ shift.pk }} - ${ shift.amount_of_orders }$/${ shift.max_orders_total }$ - ${ start_end_time }$<br>
         <template v-if="shift.assignees && shift.assignees.length > 0">
             At your service:
             <template v-for="(assignee, index) in shift.assignees">
-                <% assignee.display_name %><template v-if="index !== shift.assignees.length-1">, </template>
+                ${ assignee.display_name }$<template v-if="index !== shift.assignees.length-1">, </template>
             </template>
         </template>
         <template v-else>
@@ -17,12 +17,14 @@ <h1>{{ shift.venue.venue.name }}</h1>
     <p v-else-if="!shift.is_active" class="alert alert-danger"><i class="fa-solid fa-hand"></i> This shift is not active.</p>
 </div>
 
-<script>
-    let shift_header_{{ shift.id }}_vue = new Vue({
-        el: '#shift-header-container-{{ shift.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            shift: {}
+<script type="module">
+    import { createApp } from 'vue';
+    window.shift_header_{{ shift.id }}_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                shift: {}
+            }
         },
         computed: {
             start_end_time: function() {
@@ -61,7 +63,7 @@ <h1>{{ shift.venue.venue.name }}</h1>
                 }
             }
         },
-    });
+    }).mount('#shift-header-container-{{ shift.id }}');
 
     function refresh_shift_header_data(data) {
         shift_header_{{ shift.id }}_vue.shift = data;
diff --git a/website/thaliedje/templates/thaliedje/player.html b/website/thaliedje/templates/thaliedje/player.html
index ebdeb8b1..51fe37d3 100644
--- a/website/thaliedje/templates/thaliedje/player.html
+++ b/website/thaliedje/templates/thaliedje/player.html
@@ -21,25 +21,25 @@
         <div>
             <span class="float-start me-2 small align-left text-nowrap" style="width: 30px">
                 <template>
-                    <% Math.floor((track_progress_ms / 1000) / 60) %>:<% String(Math.floor((track_progress_ms / 1000) % 60)).padStart(2, '0') %>
+                    ${ Math.floor((track_progress_ms / 1000) / 60) }$:${ String(Math.floor((track_progress_ms / 1000) % 60)).padStart(2, '0') }$
                 </template>
             </span>
             <span class="float-end ms-2 small align-right">
                 <template>
-                    <% Math.floor((player_data.duration_ms / 1000) / 60) %>:<% String(Math.floor((player_data.duration_ms / 1000) % 60)).padStart(2, '0') %>
-    {#                (<% -1 * Math.floor((track_ms_left / 1000) / 60) %>:<% String(Math.floor((track_ms_left / 1000) % 60)).padStart(2, '0') %>)#}
+                    ${ Math.floor((player_data.duration_ms / 1000) / 60) }$:${ String(Math.floor((player_data.duration_ms / 1000) % 60)).padStart(2, '0') }$
+    {#                (${ -1 * Math.floor((track_ms_left / 1000) / 60) }$:${ String(Math.floor((track_ms_left / 1000) % 60)).padStart(2, '0') }$)#}
                 </template>
             </span>
         </div>
     </div>
-    <div class="text-center m-auto"><% player_data.track.name %></div>
+    <div class="text-center m-auto">${ player_data.track.name }$</div>
     <div class="text-center w-100">
         <template v-for="(artist, index) in player_data.track.artists">
             <template v-if="index === player_data.track.artists.length - 1">
-                <% artist %>
+                ${ artist }$
             </template>
             <template v-else>
-                <% artist %> -
+                ${ artist }$ -
             </template>
         </template>
     </div>
@@ -91,33 +91,35 @@
     </template>
 {% endif %}
 </div>
-<script>
-    let player_{{ player.id }}_vue = new Vue({
-        el: '#player-container-{{ player.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            player_data: {
-                is_playing: false,
-                shuffle: null,
-                repeat: null,
-                track: {
-                    image: null,
-                    name: null,
-                    artists: [],
+<script type="module">
+    import { createApp } from 'vue';
+    window.player_{{ player.id }}_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                player_data: {
+                    is_playing: false,
+                    shuffle: null,
+                    repeat: null,
+                    track: {
+                        image: null,
+                        name: null,
+                        artists: [],
+                    },
+                    current_volume: null,
+                    timestamp: null,
+                    progress_ms: null,
+                    duration_ms: null,
                 },
-                current_volume: null,
-                timestamp: null,
-                progress_ms: null,
-                duration_ms: null,
-            },
-            doing_call: false,
-            set_volume_index: 0,
-            refresh_timer: null,
-            recalculate_progress_interval: null,
-            track_progress_ms: 0,
-            track_progress_percentage: 0,
-            track_ms_left: 0,
-            lastRefresh: null,
+                doing_call: false,
+                set_volume_index: 0,
+                refresh_timer: null,
+                recalculate_progress_interval: null,
+                track_progress_ms: 0,
+                track_progress_percentage: 0,
+                track_ms_left: 0,
+                lastRefresh: null,
+            }
         },
         created() {
             this.refresh();
@@ -436,5 +438,5 @@
                 });
             }
         }
-    });
+    }).mount('#player-container-{{ player.id }}');
 </script>
\ No newline at end of file
diff --git a/website/thaliedje/templates/thaliedje/queue.html b/website/thaliedje/templates/thaliedje/queue.html
index 634c5139..1e484227 100644
--- a/website/thaliedje/templates/thaliedje/queue.html
+++ b/website/thaliedje/templates/thaliedje/queue.html
@@ -12,13 +12,13 @@
           <tbody>
             <template v-for="item in queue">
                 <tr>
-                  <th scope="row"><% item.track_name %></th>
+                  <th scope="row">${ item.track_name }$</th>
                   <td>
                       <template v-for="(artist, index) in item.track_artists">
-                          <% artist %><template v-if="index !== item.track_artists.length - 1">, </template>
+                          ${ artist }$<template v-if="index !== item.track_artists.length - 1">, </template>
                       </template>
                   </td>
-                  <td><% Math.floor(item.duration_ms / 1000 / 60) %>:<% String(Math.floor(item.duration_ms / 1000 % 60)).padStart(2, '0') %></td>
+                  <td>${ Math.floor(item.duration_ms / 1000 / 60) }$:${ String(Math.floor(item.duration_ms / 1000 % 60)).padStart(2, '0') }$</td>
                 </tr>
             </template>
           </tbody>
@@ -31,14 +31,16 @@
     </template>
 </div>
 
-<script>
-    let player_{{ player.id }}_queue_vue = new Vue({
-        el: '#queue-container-{{ player.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            queue: [],
-            refreshTimer: null,
-            lastRefresh: null,
+<script type="module">
+    import { createApp } from 'vue';
+    window.player_{{ player.id }}_queue_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                queue: [],
+                refreshTimer: null,
+                lastRefresh: null,
+            }
         },
         created() {
             this.refresh_player_queue();
@@ -72,5 +74,5 @@
                 }
             },
         }
-    });
+    }).mount('#queue-container-{{ player.id }}');
 </script>
\ No newline at end of file
diff --git a/website/thaliedje/templates/thaliedje/requests.html b/website/thaliedje/templates/thaliedje/requests.html
index 88e43d9e..708d62f6 100644
--- a/website/thaliedje/templates/thaliedje/requests.html
+++ b/website/thaliedje/templates/thaliedje/requests.html
@@ -14,14 +14,14 @@
             <tbody>
             <template v-for="item in requests">
                 <tr>
-                    <th scope="row"><% item.track.track_name %></th>
+                    <th scope="row">${ item.track.track_name }$</th>
                     <td>
                         <template v-for="(artist, index) in item.track.track_artists">
-                            <% artist %><template v-if="index !== item.track.track_artists.length - 1">, </template>
+                            ${ artist }$<template v-if="index !== item.track.track_artists.length - 1">, </template>
                         </template>
                     </td>
                     {% if show_requestor %}
-                        <td><% item.requested_by.display_name %></td>
+                        <td>${ item.requested_by.display_name }$</td>
                     {% endif %}
                 </tr>
             </template>
@@ -33,14 +33,16 @@
     </template>
 </div>
 
-<script>
-    let player_{{ player.id }}_requests_vue = new Vue({
-        el: '#requests-container-{{ player.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            requests: [],
-            refreshTimer: null,
-            lastRefresh: null,
+<script type="module">
+    import { createApp } from 'vue';
+    window.player_{{ player.id }}_requests_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                requests: [],
+                refreshTimer: null,
+                lastRefresh: null,
+            }
         },
         created() {
             this.refresh_player_requests();
@@ -78,5 +80,5 @@
                 }
             },
         }
-    });
+    }).mount('#requests-container-{{ player.id }}');
 </script>
\ No newline at end of file
diff --git a/website/thaliedje/templates/thaliedje/search.html b/website/thaliedje/templates/thaliedje/search.html
index f75743b4..22d8cd37 100644
--- a/website/thaliedje/templates/thaliedje/search.html
+++ b/website/thaliedje/templates/thaliedje/search.html
@@ -20,11 +20,11 @@ <h5 class="text-uppercase">Tracks</h5>
                                     </div>
                                     <div class="flex-equal-width d-flex flex-column">
                                         <div>
-                                            <% track.name %>
+                                            ${ track.name }$
                                         </div>
                                         <div style="font-style: italic;">
                                             <template v-for="(artist, art_index) in track.artists">
-                                                <% artist %><template v-if="art_index !== track.artists.length - 1">, </template>
+                                                ${ artist }$<template v-if="art_index !== track.artists.length - 1">, </template>
                                             </template>
                                         </div>
                                     </div>
@@ -45,10 +45,10 @@ <h5 class="text-uppercase">Playlists</h5>
                                         </div>
                                         <div class="flex-equal-width d-flex flex-column">
                                             <div>
-                                                <% playlist.name %>
+                                                ${ playlist.name }$
                                             </div>
                                             <div style="font-style: italic;">
-                                                <% playlist.owner.display_name %>
+                                                ${ playlist.owner.display_name }$
                                             </div>
                                         </div>
                                         <button class="btn btn-success" style="height: 40px" v-on:click="ask_start_with_context(playlist.uri)"><i class="fa-solid fa-play"></i></button>
@@ -67,11 +67,11 @@ <h5 class="text-uppercase">Albums</h5>
                                         </div>
                                             <div class="flex-equal-width d-flex flex-column">
                                             <div>
-                                                <% album.name %>
+                                                ${ album.name }$
                                             </div>
                                             <div style="font-style: italic;">
                                                 <template v-for="(artist, art_index) in album.artists">
-                                                    <% artist %><template v-if="art_index !== album.artists.length - 1">, </template>
+                                                    ${ artist }$<template v-if="art_index !== album.artists.length - 1">, </template>
                                                 </template>
                                             </div>
                                         </div>
@@ -94,16 +94,18 @@ <h5 class="text-uppercase">Albums</h5>
 </div>
 
 
-<script>
-    let player_{{ player.id }}_search_vue = new Vue({
-        el: '#player-search-container-{{ player.id }}',
-        delimiters: ['<%', '%>'],
-        data: {
-            query: "",
-            tracks: [],
-            albums: [],
-            playlists: [],
-            current_search_index: 0,
+<script type="module">
+    import { createApp } from 'vue';
+    window.player_{{ player.id }}_search_vue = createApp({
+        delimiters: ['${', '}$'],
+        data() {
+            return {
+                query: "",
+                tracks: [],
+                albums: [],
+                playlists: [],
+                current_search_index: 0,
+            }
         },
         created() {
             fetch('{% url "v1:player_search" player=player %}')
@@ -252,5 +254,5 @@ <h5 class="text-uppercase">Albums</h5>
                 }
             }),
         }
-    });
+    }).mount('#player-search-container-{{ player.id }}');
 </script>
\ No newline at end of file
diff --git a/website/tosti/templates/tosti/base.html b/website/tosti/templates/tosti/base.html
index bba5c3bc..1ba1c9fe 100644
--- a/website/tosti/templates/tosti/base.html
+++ b/website/tosti/templates/tosti/base.html
@@ -32,15 +32,20 @@
     <meta name="msapplication-TileColor" content="#e8b365">
     <meta name="theme-color" content="#e8b365">
 
-    <!-- Vue JS -->
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
-
     <!-- TaTa.js notifications -->
     <script src="{% static 'tosti/js/tata.js' %}"></script>
 
     <!-- Announcements static files -->
     <link rel="stylesheet" href="{% static 'announcements/css/announcements.css' %}" type="text/css">
     <script src="{% static 'announcements/js/announcements.js' %}"></script>
+    <script type="importmap">
+       {
+         "imports": {
+           "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js",
+           "qrcode": "https://cdn.jsdelivr.net/npm/qrcode.vue@3.4.0/dist/qrcode.vue.esm.js"
+         }
+       }
+     </script>
 </head>
 <body class="d-flex flex-column h-100">
 <div id="page-container">