Introduction to Vue.js
Vue.js Development
Introduction to Vue.js
Vue.js is a progressive JavaScript framework for building user interfaces. Created by Evan You in 2014, Vue was designed to be incrementally adoptable — you can use it as a simple library to enhance parts of an existing page, or as a full-featured framework powering a complex single-page application. Vue has gained enormous popularity due to its gentle learning curve, excellent documentation, and a well-designed reactivity system that makes building interactive UIs intuitive and enjoyable. Companies like Alibaba, GitLab, Nintendo, and Adobe use Vue in production.
Why Vue.js?
Vue occupies a sweet spot between React and Angular. It is more opinionated than React (providing official solutions for routing and state management) but less monolithic than Angular. Vue's template syntax is familiar to anyone who knows HTML, its reactivity system is automatic and transparent, and its component model is straightforward. Vue 3, the current major version, introduced the Composition API, improved performance with a proxy-based reactivity system, and added first-class TypeScript support.
Quick Start with CDN
The fastest way to try Vue is by including it via a CDN script tag. This requires no build tools and is perfect for learning or adding interactivity to an existing page.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Quick Start</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button @click="count++">Increment</button>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello, Vue!",
count: 0,
};
},
}).mount("#app");
</script>
</body>
</html>
Setting Up with Vite (Recommended)
For real projects, use the official create-vue scaffolding tool powered by Vite. It sets up a modern development environment with hot module replacement, TypeScript support, and optimized builds.
# Create a new Vue project
npm create vue@latest my-vue-app
# Follow the prompts to select features:
# - TypeScript support
# - Vue Router
# - Pinia state management
# - ESLint + Prettier
cd my-vue-app
npm install
npm run dev
# Project structure:
# my-vue-app/
# src/
# App.vue — root component
# main.ts — app entry point
# components/ — reusable components
# views/ — page components
# router/ — Vue Router config
# stores/ — Pinia stores
Understanding the Vue Instance
Every Vue application starts by creating an application instance with createApp(). The root component passed to createApp defines the component tree. The data() function returns an object whose properties become reactive — when they change, the view updates automatically.
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
// Register global components, plugins, etc.
// app.component("MyButton", MyButton);
// app.use(router);
// app.use(pinia);
app.mount("#app");
Tip: Start with the CDN approach to learn Vue's core concepts without build tool complexity. When you are comfortable with templates, reactivity, and components, transition to a Vite-based project for a professional development workflow.
Key Takeaways
- Vue.js is a progressive framework that can scale from a simple script include to a full SPA framework.
- Use the CDN for quick experiments and
create-vuewith Vite for real projects. - The
createApp()function creates a Vue application instance that mounts to a DOM element. - Data returned from
data()is reactive — changes automatically update the rendered view. - Vue 3 offers the Composition API, improved performance, and first-class TypeScript support.