Day 1: The Vue Way - Introduction & Setup

Welcome to Day 1 of your 14-day journey to mastering Vue.js!

If you’re coming from React (hooks), Angular (services), or just plain HTML/JS, Vue will feel like a breath of fresh air. It’s designed to be approachable yet scaleable.

Today, we’re going to look at what makes Vue special, set up our dev environment, and dissect our first component.

Why Vue?

Vue calls itself “The Progressive Framework”. This means you can drop it into a single HTML file like jQuery, or use it to build massive single-page applications (SPAs) like you would with React or Angular.

Vue vs. The Rest

• Vs React: Vue separates HTML, JS, and CSS more clearly (Single File Components). It also handles reactivity automatically (no setState or manual dependency arrays in the same way).
• Vs Angular: Vue is lighter and less opinionated initially, but offers official solutions for Routing and State Management (Router & Pinia) just like Angular.

Hands-On: Your First Project

We aren’t going to use a CDN link. We’re going modern immediately with Vite (created by the same person who made Vue, Evan You).

1. Initialize the Project

Open your terminal and run:

npm create vue@latest

This installs create-vue, the official scaffolding tool. You’ll be asked a few questions. For today, stick to these answers:

• Project name: vue-starter
• Add TypeScript? Yes (Trust me, it’s worth it even for beginners)
• Add JSX Support? No
• Add Vue Router? No (Not yet)
• Add Pinia? No
• Add Vitest? No

2. Start the Server

cd vue-starter
npm install
npm run dev

Open http://localhost:5173. You should see the “You did it!” welcome screen.

Anatomy of a Vue Component

Open src/App.vue. This is a Single File Component (SFC). It has three distinct sections:

1. <script setup>: Your JavaScript/TypeScript logic.
2. <template>: Your HTML markup.
3. <style>: Your CSS.

The <script setup>

This is the modern way to write Vue (Composition API).

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

In the <script setup> block, variables and functions are automatically exposed to the template. No need to return an object.

The <template>

This looks like regular HTML, but it’s “superpowered”.

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>
</template>

Notice <HelloWorld />. This is a custom component. Vue allows you to use components inside other components, building a tree structure.

The <style>

You can write standard CSS here.

<style scoped>
header {
  line-height: 1.5;
}
</style>

The scoped attribute is magic. It ensures these styles apply only to this component. header here won’t affect a header in another component.

Challenge for Day 1

1. Delete everything in src/App.vue.
2. Write a basic component from scratch:
   • Script: Create a constant const name = "Vue Beginner".
   • Template: Display an <h1> that says “Hello, {{ name }}!”.
   • Style: Make the h1 color green.

Solution:

<script setup lang="ts">
const name = "Vue Beginner"
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<style scoped>
h1 {
  color: #42b883; /* Vue Green */
}
</style>

Congratulations! You’ve written your first Vue component. Tomorrow, we dive deep into Reactivity—the engine that makes Vue applications come alive.