View Categories

Vue.js

Reading Time: 2 min read

Description #

Vue.js is a progressive JavaScript framework for building user interfaces. It’s designed to be approachable, versatile, and lightweight, with an emphasis on declarative rendering, component-based architecture, and smooth integration with existing projects.

History #

Vue was created by Evan You in 2014 after working with AngularJS at Google. He wanted to build something more lightweight and flexible. Since then, Vue has grown into one of the most loved front-end frameworks globally, backed by an open-source community.

Key milestones:

  • 2014: Vue 0.9 released
  • 2016: Vue 2.0 introduced Virtual DOM and better performance
  • 2020: Vue 3.0 released with Composition API and improved speed
  • 2022+: Adopted in major ecosystems like Laravel and Vite

Hello World Code #

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>

    <script>
      Vue.createApp({
        data() {
          return { message: 'Hello, World!' };
        }
      }).mount('#app');
    </script>
  </body>
</html>

How to Run #

Online: #

Locally: #

  1. Create a new file index.html
  2. Paste the code above
  3. Open it in any modern browser

Or via Vite: #

npm create vite@latest hello-vue --template vue
cd hello-vue
npm install
npm run dev

Key Concepts #

  • Declarative rendering — use {{ }} for reactive bindings
  • Reactivity system — data changes automatically update the DOM
  • Component-based — build UI with reusable blocks
  • Single-file components (.vue) — combine template, logic, and style
  • Directives — like v-if, v-for, and v-model for logic in templates
  • Composition API — new way to manage state and logic
  • CLI and Vite — quick setup with scaffolding tools
  • Transitions and animations — built-in effects for UI elements
  • Integration-friendly — drop-in script or full SPA framework
  • DevTools — robust browser extension for debugging Vue apps

Try It Online #

🔗 Vue Playground (Official)
🔗 JSFiddle Vue Template
🔗 CodeSandbox Vue Starter

Fun Facts #

  • Vue’s creator Evan You is a solo open-source developer backed by Patreon
  • Used by Alibaba, Xiaomi, GitLab, and Laravel by default
  • Vue’s logo is a green V resembling an up arrow
  • Vue is called “the jQuery of modern frameworks” for its simplicity
  • Vue 3 is smaller and faster than many competitors out of the box

Resources #

Updated on June 7, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad
Scroll to Top