Basic Reactive Counter Example

Showcase Vue 3's reactivity system by building a simple counter that updates the DOM in response to state changes.
<div id="app">
  <h1>{{ counter }}</h1>
  <button @click="counter++">Increment</button>
This is the HTML structure providing a header displaying the counter and a button to increment it. The Vue.js template syntax is used to display and update the counter in the DOM.
<script src=""></script>
const { createApp, ref } = Vue;

  setup() {
    // Declares a reactive state variable `counter`
    const counter = ref(0);

    // makes `counter` available to the template
    return { counter };
This is the JavaScript code including Vue.js script via CDN and creating a new Vue application with a reactive state `counter` using the Composition API, where `ref` is a function to make the variable reactive. The `counter` reactive variable is incremented when the button is clicked.
#app {
  text-align: center;
  margin-top: 50px;

button {
  font-size: 20px;
  padding: 10px 20px;
This is the CSS styling for the Vue app and button, centering the content and applying basic styling to the button.