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>