Updated vue.js version

guide.html

@@ -73,7 +73,7 @@
   </div>
   <script src="js/current-films.js"></script>
   <script src="js/guide.js"></script>
-  <script src="js/vue.min.js"></script>
+  <script src="js/vue.global.prod.js"></script>
   <script src="js/script-guide.js"></script>
 </body>
 </html>

index.html

@@ -63,7 +63,7 @@
       </aside>
       <ul v-cloak>
         <li v-for="film in films">
-          <img :src="'images/small/' + film.image" :srcset="'images/small/' + film.image + ' 1x, images/' + film.image + ' 2x'" :alt="film.name" loading="lazy">
+          <img :src="'images/small/' + film.image" :srcset="'images/small/' + film.image + ' 1x, images/' + film.image + ' 2x'" :alt="film.name">
           <h2>{{film.name}}</h2>
           <p>
             <span v-if="film.description">{{film.description}}</span>
@@ -85,7 +85,7 @@
     </main>
   </div>
   <script src="js/current-films.js"></script>
-  <script src="js/vue.min.js"></script>
+  <script src="js/vue.global.prod.js"></script>
   <script src="js/script-index.js"></script>
 </body>
 </html>

js/script-guide.js

@@ -1,9 +1,10 @@
-const app = new Vue({
+Vue.createApp({
-  el: "#guide",
+  data() {
-  data: {
+    return {
     currentfilms: currentfilms,
     guide: guide,
     step: 1
+    }
   },
   computed: {
     films: function() {
@@ -57,4 +58,4 @@ const app = new Vue({
       this.step = step;
     }
   }
-});
+}).mount('#guide');

js/script-index.js

@@ -1,12 +1,13 @@
-const app = new Vue({
+Vue.createApp({
-  el: "#app",
+  data() {
-  data: {
+    return {
     currentfilms: currentfilms,
     search: '',
     type: 'all',
     format: 'all',
     sortBy: 'popularity',
     sortDir: 'desc'
+    }
   },
   computed: {
     searchedfilms: function() {
@@ -79,4 +80,4 @@ const app = new Vue({
       }
     }
   }
-});
+}).mount('#app');

js/script-random.js

@@ -1,10 +1,11 @@
-const app = new Vue({
+Vue.createApp({
-  el: "#random",
+  data() {
-  data: {
+    return {
     currentfilms: currentfilms,
     tick: 0,
     selected: 0,
     show: false
+    }
   },
   computed: {
     films: function() {
@@ -13,7 +14,7 @@ const app = new Vue({
   },
   methods: {
     formatPrice: function(price) {
-      return "€".repeat(price);
+      return '€'.repeat(price);
     },
     shuffle: function() {
       if(this.tick++ < 25) {
@@ -25,4 +26,4 @@ const app = new Vue({
       this.show = true;
     }
   }
-});
+}).mount('#random');

random.html

@@ -71,7 +71,7 @@
     </main>
   </div>
   <script src="js/current-films.js"></script>
-  <script src="js/vue.min.js"></script>
+  <script src="js/vue.global.prod.js"></script>
   <script src="js/script-random.js"></script>
 </body>
 </html>