Vue.js Crash Course 2024 - Fundamentals and Project Development

Dive into a comprehensive 3-hour crash course on the Vue.js framework. Master fundamental concepts including components, directives, lifecycle, and events. Begin with an introduction to Vue.js and its role in frontend development, then progress through hands-on exercises using both the Vue CDN and Create-Vue setup. Explore key features like the Options API, Composition API, and Vue Router while building a practical Jobs project. Learn to integrate Tailwind CSS, work with JSON data, and implement CRUD operations using a REST API. Gain proficiency in creating dynamic user interfaces, handling form inputs, and managing application state. Conclude with deployment strategies on Netlify, equipping you with the skills to develop and launch Vue.js applications confidently.

- Intro
- Daily.dev Sponsor
- What is Vue.js?
- Prerequisites
- Role of Frontend Frameworks
- Why Vue.js?
- Vue Components
- Getting Setup
- Using The Vue CDN
- Create-Vue Setup
- Vue Official Extension
- Exploring Folders & Files
- Boilerplate Clean Up
- Component Structure
- Options API data & Interpolation
- v-if, v-else & v-else-if Directives
- v-for Directive & Looping
- v-bind Directive
- v-on Directive, Events & Methods
- Composition API - Long Form
- ref & Reactive Values
- Composition API Short Form
- Forms & v-model
- Delete task
- Lifecycle Methods
- onMounted & Fetching Data
- Vue Jobs Project Start
- Tailwind CSS Setup
- Theme Files & Images
- Navbar Component
- Hero Component
- Props
- HomeCards & Card Container Component
- JobListings Component & JSON Data
- JobListing Component
- JobListings Limit & showButton Props
- computed & Truncate Description
- PrimeIcons
- Vue Router & Home View
- Jobs View
- RouterLink
- Navbar Active Link
- Not Found Page
- JSON Server REST API
- Fetch Data For JobListings
- reactive Function
- JobListings Refactor To reactive
- Vue Spinner
- Fetch Single Job & Display Data
-BackButton Component
- Proxying
- Add Job Page
- Save Job POST
- Toast Notifications
- Delete Job
- Edit Page
- Fetch Job To Edit
- Update Job
- Netlify Deployment