The latest articles on DEV Community by Cloud Nine (@cloud_nine_160963aab0d284). https://dev.to/cloud_nine_160963aab0d284 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1417680%2Fd0d1b2bc-fac1-49de-8ef5-62bf0affbcf1.png https://dev.to/cloud_nine_160963aab0d284 en Cloud Nine Sun, 10 Nov 2024 21:43:11 +0000 https://dev.to/cloud_nine_160963aab0d284/nuxt-state-monitor-d0j https://dev.to/cloud_nine_160963aab0d284/nuxt-state-monitor-d0j <p><strong>Nuxt State Monitor</strong> is a lightweight Nuxt open-source module that allows to monitor and edit all variables stored in Nuxt's native state, including custom data of any type. This is useful for debugging, managing state, and keeping track of custom runtime data in a seamless and developer-friendly way.</p> <h2> Features </h2> <ul> <li>📊 State Monitoring: Real-time monitoring of all Nuxt native states.</li> <li>🔧 State Editing: Dynamically edit the state directly from the UI.</li> <li>🔍 Custom Data Monitoring: Watch and manage custom data objects and variables.</li> <li>📂 State Import/Export: Effortlessly import and export state data for debugging or sharing.</li> <li>⚡ Zero Configuration: Minimal setup and configuration needed.</li> <li>💻 Developer-Friendly UI: A sleek and intuitive UI to track and manage states.</li> </ul> <h2> Installation </h2> <p><code>npx nuxi@latest module add nuxt-state-monitor</code></p> <h2> Usage </h2> <p>Add the component in App.vue to enable the monitor globally, or in single pages if you want to keep track of custom data also (optional).</p> <p><code>&lt;NuxtStateMonitor custom-data="additional"/&gt;</code></p> <p><strong>GitHub</strong>: <a href="https://github.com/Laravel42/nuxt-state-monitor" rel="noopener noreferrer">https://github.com/Laravel42/nuxt-state-monitor</a></p> nuxt monitoring typescript opensource