Welcome to the Progressive JavaScript Framework.
1The Progressive Framework
Vue is designed from the ground up to be incrementally adoptable. You can use it as a tiny script tag to add interactivity to a single div, or you can use its powerful CLI/Vite tooling to build complex, enterprise-level Single Page Applications.
2Single-File Components (SFCs)
Vue's signature feature is the .vue file. It encapsulates the template (<template>), the logic (<script>), and the styling (<style>) of a component in a single file. This makes organizing your UI incredibly clean.
3Composition API
With Vue 3, the Composition API became the standard. It allows you to write component logic using pure JavaScript functions (setup), making code more reusable, readable, and TypeScript-friendly compared to the old Options API.
4Step-by-Step Breakdown
Welcome to Vue.js! The Progressive JavaScript Framework that makes building web interfaces incredibly fun and intuitive.
Unlike monolithic frameworks that dictate how you build everything, Vue is "progressive". You can drop it into a single HTML file like jQuery, or build massive SPAs (Single Page Applications) with it.
What does it mean that Vue is a "Progressive" framework?
- →It only works with modern browsers
- →It can be adopted incrementally
- →It forces a strict folder structure
Vue uses an incredibly simple template syntax based on standard HTML. If you know HTML, CSS, and JS, you already know 90% of Vue.
Vue files usually use the .vue extension. These are called Single-File Components (SFCs). They combine HTML, CSS, and JS into one cohesive block.
What is the file extension used for Vue Single-File Components?
- →.js
- →.jsx
- →.vue
Under the hood, Vue tracks all your variables. When a variable changes, Vue magically updates the DOM for you instantly. This is called Reactivity.
Vue has two API styles: The Options API (older, object-based) and the Composition API (modern, function-based). In this course, we will focus on the modern Composition API.
Which API style is the modern, function-based approach introduced in Vue 3?
- →Options API
- →Composition API
- →Class API
Ready to build brutalist, reactive web apps? Let's dive into the code!
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Framework Choice Doesn't Grant Accessibility for Free
Vue's template syntax compiles down to plain HTML, so semantic elements and ARIA attributes still have to be written deliberately — using <div @click> instead of <button @click> produces an element with no keyboard focus or screen-reader button semantics regardless of how reactive the underlying Vue code is.
<!-- Bad: no keyboard access -->
<div @click="submit">Submit</div>
<!-- Good: native focus + Enter/Space handling -->
<button @click="submit">Submit</button>SEO Implications
- 1
Client-Side-Only Vue Apps Render an Empty Shell for Crawlers
A Vue app mounted purely client-side (a bare <div id="app"></div> plus a bundle.js) sends crawlers an HTML document with no visible content until JavaScript executes; production Vue sites that need to rank typically use Nuxt, Vue's SSR/SSG meta-framework, so the initial HTML response already contains the rendered markup.
Best Practices
Start New Projects with create-vue (Vite)
The official `npm create vue@latest` scaffolding tool sets up Vite, the Composition API, and optional TypeScript/Router/Pinia out of the box, the currently recommended starting point over the legacy Vue CLI (webpack-based) tooling.
Frequent Bugs
Mixing the Options API's data()/methods syntax with <script setup> in the same file.
<script setup> is exclusively a Composition API construct — you cannot declare a data() function or a methods: {} object inside it. Pick one API style per component; mixing the two syntaxes in the same <script setup> block is a compile error.
Real-World Examples
Progressive Adoption on an Existing Server-Rendered Page
A Django or Rails app with server-rendered HTML adds a single <script src="https://unpkg.com/vue@3"></script> tag and mounts a small Vue app onto one <div id="cart-widget"> to make just the shopping cart interactive, without rewriting the rest of the page.
<div id="cart-widget"></div>
<script>
const { createApp, ref } = Vue;
createApp({ setup() { return { count: ref(0) }; } }).mount('#cart-widget');
</script>