Personal portfolio/blog project:
This project strips away the complexities/build tools and focuses purely on Vue.js.
Taking a simple HTML file, we add the Vue library to not only learn the core features but also to see how easily we can add it to an existing website.
Once you have a solid grounding, it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI.
While building the project, you will learn so much more, including watchers, computed properties, forms, conditional rendering, and teleport, to name a few.
Project 3 is a dashboard application with multiple pages, making use of dynamic components.
We will discover different ways of passing data in Vue.js, including provide/inject and the different types of slots available.
Creative cards app:
The last project is a card editing application. You will begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling as well.
This project will introduce the new Vue 3 Composition API, how to organize your code into reusable files, routing, lazy loading, cloud functions, image uploading, and using a database.
By the end of this course, you will have already built 4 projects and learned all of the essential Vue skills, along with the new Vue.js 3 features and syntax.
What You Will Learn
- Basics of Vue and an overview of Vue 3 version
- Build tools and single-page applications
- Slots and dynamic components
- Provide/inject and introduction to routing
- Composition API (the best feature of this version) and pushing on with our project
- Uploading images and deployment to Netlify
This course is ideal for web developers with little to zero web development experience. We recommend you learn some basics first. This is also for individuals who are new to Vue.js. This course is not for Vue.js Ninja, probably not unless they want to get up to speed on the latest Vue.js 3 features or just want a course to go through and try out some new projects.
About The Author
Table of contents
- Chapter 1 : Getting to Know Vue
- Chapter 2 : First Look at Vue.js
- Chapter 3 : Component Basics
- Chapter 4 : Build Tools and Single-Page Applications
- Chapter 5 : Countdown Project
- Chapter 6 : Forms, Events, and Modifiers
- Chapter 7 : Validation and a Deeper Look at Props
- Chapter 8 : Slots and Dynamic Components
- Chapter 9 : Provide/Inject
- Chapter 10 : Introduction to Routing
Chapter 11 : Composition API
- Section Introduction
- What is the Composition API
- Composition Setup
- Primitive Versus Reference Types
- Quick Introduction to Proxies
- Using Reactive and isReactive
- Adding Reactivity with Ref
- Destructuring and toRefs
- Standalone Composition Functions
- Mini Challenge-Moving Over the Cards by Category
- Moving Over the Cards by Category
- Accessing the Router
- Watch and WatchEffect
- Using Alongside the Options API
Chapter 12 : Pushing On with Our Project
- Section Introduction
- Linking to Selected Card and Category Styling
- The Create View
- Retrieving the Selected Card
- Selecting the Current Page
- Switching Card Pages
- The Card Preview Component
- Text Output Component
- Card Edit Component
- Text Input Component and Hover Menu
- Adding Menu Options
- Menu Options Continued
- Menu Styling
- Updating the Card
- Adding New Sections
- Removing Sections
- Rearranging the Order of Sections
- Changing the Section Height
- Additional Styling
- Provide and Inject with Composition
- Chapter 13 : Navigation Guards and Lazy Loading
- Chapter 14 : Uploading Images
- Chapter 15 : Deployment
- Title: In-Depth Vue 3 For Beginners (Inc. Composition API, Router)
- Release date: June 2021
- Publisher(s): Packt Publishing
- ISBN: 9781801079112
You might also like
Beginning COBOL for Programmers
Beginning COBOL for Programmers is a comprehensive, sophisticated tutorial and modular skills reference on the COBOL …
Microsoft Power BI - The Complete Masterclass [2023 EDITION]
Microsoft Power BI is an interactive data visualization software primarily focusing on business intelligence, part of …
Full Stack Web Development Mastery Course - Novice to Expert
Full stack development refers to the development of both frontend (client-side) and backend (server-side) portions of …
React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition
**This course is now updated for the latest version of React—React 18** React.js is the most …