Back Button Frameworks
Practical Vue Components

Practical Vue Components

As you continue building new projects, you'll find yourself reaching for the same crop of components over and over again. Most websites require modals, dropdowns, tooltips, and more. While you can certainly use a UI framework, let's instead learn how to construct these components (and more) from scratch.

Intermediate
7 episodes
1h 56m
Begin
7
Latest Episode in This Series

Added 1 year ago

Tabs

Next up, we have the common tabs Vue component. There are a hundred and one different ways...

Watch
Practical Vue Components

Practical Vue Components

As you continue building new projects, you'll find yourself reaching for the same crop of components over and over again. Most websites require modals, dropdowns, tooltips, and more. While you can certainly use a UI framework, let's instead learn how to construct these components (and more) from scratch.

Begin
7
Latest Episode in This Series

Added 1 year ago

Tabs

Next up, we have the common tabs Vue component. There are a hundred and one different ways...
Watch

Your Teacher | Jeffrey Way

Visit Website
https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
    1. EPISODE 1

      Run Time 9:21

      Free

      Smooth Scrolling

      So the user clicks a link, and the page smoothly scrolls to your desired section. It's a common enough need. Let's wrap this functionality in a reusable Vue component, called ScrollLink.

      View the source code for this episode on GitHub.

    2. EPISODE 2

      Run Time 15:05

      Context Menus

      Next up, we'll create a typical context menu that can be referenced anywhere on your site. You've surely seen these on countless sites, including Facebook and Twitter.

      View the source code for this episode on GitHub.

    3. A common need is to display a block of HTML only when another block is hidden from the viewport. In fact, this technique is used in a number of places around the Laracasts website. You'll be happy to hear that it's quite easy to accomplish.

      View the source code for this episode on GitHub.

    4. EPISODE 4

      Run Time 20:12

      Modals and Custom Vue Plugins

      Our next practical Vue component is, of course, the ubiquitous modal. In this episode, we'll migrate and enhance the code from the CSS-only modals lesson. Once working, we'll then learn how to extract the code to a custom Vue plugin.

      View the source code for this episode on GitHub.

    5. EPISODE 5

      Run Time 28:41

      Confirmation Dialogs and Buttons

      Next up on the agenda is flexible confirmation buttons and dialogs. Among other things, this will offer us a chance to review event dispatchers and promises.

      View the source code for this episode on GitHub.

    6. EPISODE 6

      Run Time 15:21

      Inline SVGs Using Render Functions

      Our next practical Vue component offers us an easy way to dynamically load and tweak inline SVGs on the fly.

      View the source code for this episode on GitHub.

    7. EPISODE 7

      Run Time 18:18

      Tabs

      Next up, we have the common tabs Vue component. There are a hundred and one different ways to construct these, but let's review one path you might consider.

      View the source code for this episode on GitHub.

    2.

Want us to email you occasionally with Laracasts news?