Vue.js Crash Course

Overview

• Target Audience: Beginners with no or limited experience with Vue.js.
• Content: Course split into multiple parts, including slides, a quick setup using the CDN, and setting up larger projects with Create Vue.

Course Structure

1. Introduction & Slides (~10 minutes)
2. Quick Setup using CDN
3. Setting up with Create View for larger projects
4. Basic Task Project (to learn components, directives, etc.)
5. Main Project: Job Listing Website
6. Using Json Server for backend data.

Quick Setup using CDN

• Fastest way to get Vue.js running.
• Mainly used for small projects and testing.
• Dependency: Can transition from CDN to Create Vue for larger projects.

Setting up with Create Vue

• Use npx create-vue@latest command for setup.
• Import modules and initialize the app with main.js.

Components

• Basics: Template, Script, Style
• Props: For passing data between components.

Fundamentals Covered

• Directives: v-if, v-else, v-else-if, v-for, v-bind, v-on.
• Events: Attaching events using v-on or shorthand @.
• Computed Properties: For dynamic data that updates when dependencies change.
• Lifecycle Hooks: Like mounted() for running code at specific stages of the component's lifecycle.

Main Task: Job Listing Project

• Frontend: Vue.js with Tailwind CSS for styling.
• Backend: Json Server for creating a mock REST API.
• Routing: Using Vue Router for navigation.
• CRUD Operations: Create, Read, Update, Delete job listings.
• Toast Notifications: Using vue-toastify for success/error messages.

Setting up Tailwind CSS

1. Install tailwindcss, postcss, autoprefixer: npm install tailwindcss postcss autoprefixer
2. Create config files: npx tailwindcss init -p
3. Add Tailwind directives to CSS file
4. Update configuration to include Tailwind classes

Project Steps

• Navbar: Created as a reusable component.
• Hero Component: Demonstrated using props for dynamic titles and subtitles.
• Home Cards Component: Example of using container components and dynamic classes.
• Job Listings Component: Fetching data from Json Server and displaying job listings.
• Forms: Two-way data binding with v-model for creating and editing job listings.
• Spinner: Loading indicator using vue spinner.
• Router: Setting up different routes like Home, Jobs list, Single Job View, Add Job, and Edit Job.
• Proxy Setting: Simplify API URLs for deployment.

Final Steps

1. Deployment: Using Netlify; note limitations due to Json Server being local.
2. Enhancements: Adding confirmation for delete, success/error toasts, active links in the navbar, and cleaning up code.

Helpful Plugins & Extensions

• VS Code Extensions: Official Vue.js extension for syntax highlighting.
• Vue Awesome: For icons
• Vue Spinner: For loading indicators
• Vue Toastify: For notifications

Final Thoughts

• Learning Vue.js thoroughly involves understanding core concepts like components, directives, and lifecycle hooks.
• Comparison and contrast via building similar projects in React, Angular, and Vue.js help in deeper understanding and specialization decision.

Tools and Commands

• Vue CLI: Deprecated. Use Create Vue instead.
• Vite: Serves as the development server and build tool.
• Axios: For making HTTP requests.
• Json Server: Quick and easy setup for a local backend.
• Node.js/npm: Essential for managing packages and project dependencies.