Update component for single slide preview to Vue 3 composition API

resources/js/components/slides/slides-single.vue

@@ -1,35 +1,41 @@
-<template>
-    <slide v-bind:content="slide.content"></slide>
-</template>
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+import axios from 'axios';
+import Slide from './slide.vue'
+
+const props = defineProps(['id', 'lan_id']);
 
-<script>
-    export default {
-        data() {
-            return {
-                slide: {
-                    content: '',
-                },
-            };
-        },
-        props: ['id', 'lan_id'],
-        created() {
-            var self = this;
-            self.update();
-            setInterval(function () {
-                self.update()
-            }, 30000);
-        },
-        methods: {
-            update() {
-                console.log('Getting slide')
-                axios.get('lans/' + this.lan_id + '/slides/' + this.id)
-                    .then((response) => {
-                        console.log('Displaying single slide');
-                        this.$data.slide = response.data.data;
-                    }, (error) => {
-                        console.log('Error getting slide: ' + error.response)
-                    })
-            }
-        }
+const slide = ref({content: ''});
+
+const update = async () => {
+    try {
+        console.log('Getting slide');
+        const response = await axios.get(`lans/${props.lan_id}/slides/${props.id}`);
+        console.log('Displaying single slide');
+        slide.value = response.data.data;
+    } catch (error) {
+        console.log('Error getting slide:', error.response);
     }
+};
+
+onMounted(() => {
+    update();
+});
+
 </script>
+
+<template>
+    <div class="container-1920x1080">
+        <slide :content="slide.content"></slide>
+    </div>
+</template>
+
+<style>
+div.container-1920x1080 {
+    /* set container initial and maximum sizes */
+    max-width: 1920px;
+    width: 1920px;
+    max-height: 1080px;
+    height: 1080px;
+}
+</style>

resources/js/pages/slides.js

@@ -1,7 +1,9 @@
 import Slides from '../components/slides/slides.vue'
+import SlidesSingle from '../components/slides/slides-single.vue'
 import FullscreenButton from '../components/fullscreen-button.vue'
 
 const app = createApp({});
 app.component('Slides', Slides);
+app.component('SlidesSingle', SlidesSingle);
 app.component('FullscreenButton', FullscreenButton);
 app.mount('#app');

resources/views/pages/slides/show.blade.php

@@ -5,14 +5,8 @@
 @endsection
 
 @section('content')
-    <script>
-        window.addEventListener('load', function() {
-            const app = new Vue({
-                el: '#app'
-            });
-        });
-    </script>
-    <div id="app" class="container-1920x1080 tv">
+    @vite(['resources/js/pages/slides.js'])
+    <div id="app">
         <slides-single v-bind:lan_id="{{ $slide->lan->id }}" v-bind:id="{{ $slide->id }}"></slides-single>
         <fullscreen-button></fullscreen-button>
     </div>