Vue Detect Viewport Changes

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Detect Viewport Changes</h3>
        <p>Viewport width: {{ viewportWidth }}</p>
        <p>Viewport height: {{ viewportHeight }}</p>
    </div>

app.mount("#app");
    </script>
    <style scoped>
        #app {
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            font-family: Arial, sans-serif;
            color: #333;
        }
    </style>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Detect Viewport Changes</h3>
        <p>Viewport width: {{ viewportWidth }}</p>
        <p>Viewport height: {{ viewportHeight }}</p>
    </div>
​
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    viewportWidth: window.innerWidth,
                    viewportHeight: window.innerHeight
                };
            },
            mounted() {
                window.addEventListener('resize', this.handleResize);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResize);
            },
            methods: {
                handleResize() {
                    this.viewportWidth = window.innerWidth;
                    this.viewportHeight = window.innerHeight;
                }
            }
        });
​
        app.mount("#app");
    </script>
    <style scoped>
        #app {
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            font-family: Arial, sans-serif;
            color: #333;
        }
    </style>
</body>
​
</html>