Getting Started with Vue JS 2 : A Comprehensive Guide

Explore implementing templates in a Vue.js view app by defining templates as strings, binding data properties with mustache-style syntax, and updating login dialog labels and the sign-in button text.

Compare template options for a view component or app, from strings to GSX, weighing each approach's pros and cons, and embrace single-file components for scalable Vue apps.

Build a Vue 2 shopping cart with app and list-item components, using props, v-for, v-model, and a computed total to display itemized costs and the grand total.

Develop and integrate a reusable list widget in Vue 2 that manages a cart of items, supports add and remove via enter key, and demonstrates parent-to-child props before introducing events.

Master one-way data flow in Vue.js 2 using props and events. Understand data binding, component decoupling, and passing data from parent to child via a restaurant list example.

Begin building a sales request form in a Vue js 2 project by creating reusable form field components, binding data, and handling inputs like name, email, and phone.

Learn how to bind classes conditionally in Vue.js 2 by turning a button into a reusable super button that toggles on and off with computed text and prevent-default click handling.

Build a no-frills image carousel in Vue.js 2 using a viewport, gallery, and slides, with horizontal translate animation and slot-based composition.

Store selected locations in the browser's local storage using a place object with latitude, longitude, and a unique id, and render weather cards for each location.

Build a weather app in Vue JS 2 that renders video cards from saved locations, fetches current conditions from the EPA API, and shows day or night visuals.

Create a currency converter in Vue.js 2 with conversions on input. Fetch conversion rates from the fixer.io API using input and change events, with watchers or computed properties as needed.

Explore how to scale Vue apps with single-file components, learning props, data binding, lifecycle hooks, and refs, while moving from single-file scripts to modular, maintainable web applications.

Explore module bundlers and task runners to bundle code into a single optimized file with tree shaking, using sass and typescript in a vue 2 app that checks palindromes.

Master the basics of webpack by learning its four configuration sections—entry points, output, module with loaders, and plugins—and how they govern bundling and asset transformation.

Configure webpack to process sass into css using sass loader, css loader, and style loader, with extract text plugin for production css.

Explore single-file components in Vue.js, learning how to split an app into self-contained templates, logic, and styles, and build a restaurant list and detail app with API data.

Install the Vue command line tool globally, scaffold a back template, install dependencies, and start the dev server to view a hello world Vue app locally.

Download the project assets, drag the server folder to the template root, and copy static folder files into the distribution folder to prepare assets and svga star icons for production.

Design the core Vue app by building the root template and mounting the single-file component with template, script, and style blocks, then manage global and scoped styling.

Build a reusable list item shell in a single-file Vue 2 component, bind item data with props, register the component, and render items with v-for and a unique key.

Create a photo thumbnail component for the list item in Vue, extracting name, type, photo, and rating from backend, then bind it with a prop and a computed background image.

Deploy a static front-end single page app with surge.sh by installing the command line interface, publishing the production build with pre-set environment variables and cross-origin resource sharing considerations, within minutes.

Build an address book web app with routing and Firebase Realtime Database, featuring contact lists, detail views, add and delete actions, and reusable components with data binding.

Set up a Vue app for an address book project, install Vue Router for a single-page app, organize folders and assets, and start the development server with hot reloading.

Download and set up the project assets from the resources archive, inspecting the static folder of pre-built styles and images, and use sample address book data as the data source.

Learn how single page apps route between sections using hash based navigation and dynamic content loading via a router view, with the history API and Vue Router.

Learn how to implement routing in Vue.js by creating and configuring a router, registering it with Vue, and rendering route-based components like home and about using router-view.

Build the Vue.js 2 app shell by wiring the view app instance, router, and single-file components, with shared styles and a router-view for dynamic components like home and contact.

Builds the home component to render a dynamic contact list (name, email, phone) and a router-link to the add contact page, while noting hash routing and history api.

Extend the user input component with conditional rendering to display social input fields and platform icons for Facebook, Twitter, Instagram, and LinkedIn.

Implement a rudimentary data validation using regex for email and phone, validating name, email, and address before enabling the save button via a computed validate method.

Implement a clear form function in the add contact component that empties all fields, then redirects to the home route after saving data, using v-model bindings and router push.

Import the firebase interface into Vue components as needed to push data to the realtime database and demonstrate open read and write rules for a public address book.

Implement an app-wide offline notification using firebase real-time connectivity to alert users when the app goes offline, disable firebase interactions such as saving, and render the notice across all routes.

Showcases a preloader during initial app load as the app connects to firebase, and uses conditional rendering to display a no records found message until the list populates.

Explore building a reusable user response dialog in Vue JS 2 by creating a single-file component with slots to customize the call-to-action and emit agree and disagree events.

Build a single-page Vue.js 2 app with home, add contact, and detail views, using routing and data binding with props and events, and deploy to Firebase hosting.

Implement Firebase authentication in a Vue app with email and password and optional providers like Google or phone authentication, and learn to configure sign-in methods and domain access.

Implement a secure login and logout flow in a Vue.js 2 app using Firebase authentication, storing the user token and ID in local storage, and guarding routes and navigating home.

Fetch the unique user id (UAD) on login and expose it to components via the router, binding it as a prop and showing the logout button only when logged in.

Utilize firebase to implement a password reset flow in a Vue.js 2 app, using a reusable user response component to confirm before sending the reset email and handling errors.

Learn to display and customize user notifications in Vue.js 2 by implementing a notification unit with show/hide binding, mapping firebase errors to friendly messages, and auto-hiding after three seconds.

Deploy your vue js 2 address book app to firebase using a production build and firebase cli, then customize authentication emails and enforce user-scoped data rules.

Congratulations on completing the course and sparking an interest in Vue. Share your project ideas or a review, and the instructor will listen and implement feedback quickly.