Skip to content

summary.en.md

Latest commit

 

History

History
225 lines (179 loc) · 11.6 KB

summary.en.md

File metadata and controls

225 lines (179 loc) · 11.6 KB

Vue.js Beginner Course | Build & Deploy a Modern Fitness App

Disclaimer: This is a personal summary and interpretation based on a YouTube video. It is not official material and not endorsed by the original creator. All rights remain with the respective creators.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

This document summarizes the key takeaways from the video. I highly recommend watching the full video for visual context and coding demonstrations.

Before You Get Started

  • I summarize key points to help you learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

Introduction & Project Demo

The course is a complete beginner-friendly Vue.js tutorial where we build a fully functional workout planner app (push-pull-legs program) with three pages: landing page, dashboard, and workout tracker. The app includes progress tracking, exercise modals with descriptions, localStorage persistence, and mobile-responsive design using Fanta.css for styling.

We use Vue 3 with Vite, plain JavaScript (no TypeScript), and the Composition API with <script setup>. Everything is built from scratch together — no copying large code chunks.

Ask AI: Vue.js beginner project ideas

Project Setup with Vite

Run:

npm create vite@latest

Choose “Vue” → “JavaScript”. Then:

cd your-project-name
npm install
npm run dev

The starter template gives you a working app on localhost:5173 (or similar port).

Key files:

  • index.html → entry point
  • main.js → creates and mounts the Vue app
  • App.vue → root component

Ask AI: How to create Vue project with Vite

Vue Component Basics (<script setup>)

Every .vue file is a Single-File Component (SFC) with three sections:

<script setup>
// logic (ref, computed, lifecycle hooks…)
</script>

<template>
  <!-- HTML + Vue directives -->
</template>

<style scoped>
/* styles only apply to this component */
</style>

The scoped attribute keeps CSS local. <script setup> is the modern way — everything in setup is automatically exposed to the template.

Ask AI: Vue 3 script setup syntax

Project Structure We Created

src/
├── components/
│   ├── layout/Layout.vue
│   └── pages/
        ├── Welcome.vue
        ├── Dashboard.vue
        └── Workout.vue
├── utils/index.js     → all workout data, tips, exercise descriptions
└── App.vue            → root with navigation logic

We also added Fanta.css globally in main.js:

import './fanta.css'

Ask AI: Organizing components in Vue project

Navigation with Conditional Rendering (Single-Page App Style)

In App.vue we manage which page to show:

<script setup>
import { ref } from 'vue'
import Welcome from './components/pages/Welcome.vue'
import Dashboard from './components/pages/Dashboard.vue'
import Workout from './components/pages/Workout.vue'

const selectedDisplay = ref(1) // 1=welcome, 2=dashboard, 3=workout
</script>

<template>
  <Welcome v-if="selectedDisplay === 1" :handle-change-display="() => selectedDisplay = 2" />
  <Dashboard v-else-if="selectedDisplay === 2" />
  <Workout v-else-if="selectedDisplay === 3" />
</template>

Passing functions as props lets child components control navigation.

Ask AI: Conditional rendering in Vue

State Management with ref() and Reactive Data

All app state lives in App.vue:

const data = ref({})                    // workout progress
const selectedWorkout = ref(-1)         // currently viewed workout index
const selectedDisplay = ref(1)

We load saved data on mount and save to localStorage on every change.

Ask AI: Vue 3 ref vs reactive

Building the Welcome / Landing Page

Static at first → add content → style with scoped CSS and Fanta.css classes → add “Begin” button that calls the passed handleChangeDisplay prop to switch to dashboard.

Ask AI: Vue landing page design

Dashboard Page with Tips & Workout Grid

  • Random daily tip using Math.random()
  • Grid component receives workout data via props and renders cards
  • Each card uses v-for and disables future workouts
  • “Start Workout” button goes straight to current workout

Ask AI: v-for and dynamic classes in Vue

Workout Page & Exercise Modal

  • Warm-up + main exercises displayed with v-for
  • v-model on inputs for two-way binding
  • Exercise modal built with <teleport> to body (called Portal in the course) so it overlays everything
  • Modal opens on ? icon click and closes on backdrop click

Key code for teleport modal:

<Teleport to="body">
  <div v-if="showModal" class="modal-backdrop" @click="showModal = false">
    <div class="modal" @click.stop>
      <!-- content -->
    </div>
  </div>
</Teleport>

Ask AI: Vue 3 Teleport for modals

Progress Tracking & Completion Logic

Computed properties in App.vue:

const isWorkoutComplete = computed(() => { …every exercise has a value… })
const firstIncompleteWorkoutIndex = computed(() => { …find first incomplete… })

These drive:

  • Disable future workout buttons
  • “Complete” button only enables when all inputs filled
  • Automatic unlock of next workout on save

Ask AI: Vue computed properties for progress tracking

LocalStorage Persistence

Save on every “Save & Exit” or “Complete”:

localStorage.setItem('workouts', JSON.stringify(data.value))

Load on mount:

onMounted(() => {
  const saved = localStorage.getItem('workouts')
  if (saved) data.value = JSON.parse(saved)
})

Ask AI: Vue localStorage persistence

Reset Plan Functionality

Reset button appears only when all workouts are complete (firstIncompleteWorkoutIndex === -1). Clears localStorage and resets state.

Ask AI: Reset app state in Vue

Deployment to Netlify (Free)

  1. Push code to GitHub
  2. Connect repo in Netlify → Import project
  3. Netlify auto-detects Vite build command (npm run build) and publish directory (dist)
  4. Deploy → live URL in minutes

Ask AI: Deploy Vue Vite app to Netlify

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: