Create a Web Link Preview with VueJS Components

Offered By
Coursera Project Network
In this Guided Project, you will:

The fundamentals of VueJS components

Create a reusable VueJS component

Communications between components and parent

Clock1.5 hours
CloudNo download needed
VideoSplit-screen video
Comment DotsEnglish
LaptopDesktop only

One of the strengths of VueJS is the being able to leverage numerous third party reusable components. In this project, you will learn how to create a reusable VueJS component yourself and take a more object oriented development approach. Basic HTML, DOM, JavaScript, and VueJS required as prerequisites. If you are new to VueJS, completing my other guided project “Write a University Index Web App with VueJS” is highly recommended.

Skills you will develop

Computer ProgrammingJavaScriptvuejsWeb Development

Learn step-by-step

In a video that plays in a split-screen with your work area, your instructor will walk you through these steps:

  1. Introduction and preview

  2. Dive in and create a basic VueJS component that looks like the embedded solution

  3. Pass data into components as props

  4. Move the generation logics to the new component and add a watcher to trigger it

  5. Use component to parent communication to hide the text web link when the preview is done

  6. Remove the old code and see how much nicer it is

How Guided Projects work

Your workspace is a cloud desktop right in your browser, no download required

In a split-screen video, your instructor guides you step-by-step

Frequently asked questions

Frequently Asked Questions

More questions? Visit the Learner Help Center.