Create a tiny web App with VUE 3

Name: Create a tiny web App with VUE 3
Rating: 4.5 (168 reviews)

Get started with VUE V3 by creating a tiny app

Created byCoding Revolution

Last updated 10/2021

English

English [Auto],

What you'll learn

Begin with with VUE JS version 3
Build a tiny app in a couple of hours
Learn some of the basic VUE tools
Install and deploy vue app

Course content

2 sections • 10 lectures • 1h 42m total length

Introduction1:48
Learn to build a tiny web app with Vue 3 by creating a question-driven game with multiple screens, shared state, transitions, and random answers, then deploy to production.
IDE, NODE and Github3:14
Set up your development environment with Visual Studio Code, install Node.js, and verify the installation in the integrated terminal, then access the course code on GitHub for each video.

Installation11:51
Learn to install and scaffold a Vue 3 project, create three components (initial, confirm, results), wire them in the app, import global styles, and run a local dev server.
Creating the initial screen11:01
Create the initial screen in Vue 3 by rendering dynamic components via a central data model, switching between initial, confirm, and result screens with a next button and bootstrap styling.
Finish initial screen18:09
Build the initial screen in a Vue 3 app by binding user input with v-model, validating length, showing the next button conditionally, and emitting a go to event to progress.
Creating the confirm screen6:35
Learn how to pass data from a parent to a child in Vue 3 using props, display questions, and navigate with next and back controls, including simple fade transitions.
Transitions10:50
Learn to implement transitions in a tiny Vue 3 app with Animate.css, using the built-in transition component for fade, bounce, and delayed enter and leave effects.
Getting results17:03
Finish a tiny Vue 3 app by implementing a results screen that uses props and events to display a random result from a list.
Deploying7:39
Build a production-ready Vue 3 app, generate a dist directory, and deploy it to a static hosting service via search, obtaining a live domain.
Adding toasts and redeploying14:05
Add a Vue 3 toast notification with a centralized handleToast, supporting error, warning, and success types, then rebuild and redeploy the updated app to production.

Requirements

HTML and JS

Description

So you want to finally start with VUE JS ? this is the course for you.

We will create a tiny VUE application so you can get started and realize that creating web apps its super easy with VUE.

The app calls "Decider", the user can ask a question and at the end we will randomly pick an answer from a list, this is like the magic 8 ball app.

On this one we will practice validation, toasts, data with methods, we will use events to pass data between components.

And at the very end we will build the app and deploy it to a hosting site like Surge.

You don't need to know Vue JS, the idea is to get started right here so then later you can keep expanding what you know.

What about the instructor experience ?

I've been around for 13 years now, built lots of applications for small projects and big companies like Citi, Fox, Disney and a lot more.

Today I work as a developer for a major company developing applications with React , Angular and Vue.

How about the target audience?

This course is for everyone, no coding experience required.
If you want to take your coding to the next level, this is the course for you.

Who this course is for:

Anyone who wants to start with VUE

Create a tiny web App with VUE 3

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 5min

Creating the app8 lectures • 1hr 37min

Requirements

Description

Who this course is for: