What Is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. Unlike monolithic frameworks, Vue is designed to be incrementally adoptable — you can sprinkle it into an existing page or power a full single-page application from the ground up. Its approachable learning curve and excellent documentation have made it one of the most popular front-end choices in the ecosystem. At its core, Vue provides a declarative, component-based programming model. You describe what your UI should look like for a given state, and Vue efficiently updates the DOM whenever that state changes. This reactive data-binding system eliminates most of the tedious manual DOM manipulation that plagued earlier JavaScript development. Vue 3, released in 2020, introduced the Composition API alongside the existing Options API, offering improved TypeScript support, better logic reuse through composables, and a smaller bundle size thanks to tree-shaking. You can choose either API style — or mix them — depending on your team's preference and the complexity of your components.

Example

<!-- index.html — minimal Vue 3 CDN setup -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello Vue 3</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="greet">Say Hello</button>
  </div>

  <script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

    createApp({
      setup() {
        const message = ref('Welcome to Vue 3!');

        function greet() {
          message.value = 'Hello from Vue 3 ' + new Date().getFullYear();
        }

        return { message, greet };
      }
    }).mount('#app');
  </script>
</body>
</html>

HTML

Full Editor

Related Resources

Vue.js Reference

Complete tag & property list

Vue.js How-To Guides

Step-by-step practical guides

Vue.js Exercises

Practice what you've learned