JavaScript
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.
Difficulty
-
-
Smooth Scrolling
Run Time 9:21 FreeSo 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.
-
Context Menus
Run Time 15:05Next 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.
-
Show an Element When Another is Hidden
Run Time 9:50A 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.
-
Modals and Custom Vue Plugins
Run Time 20:12Our 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.
-
Confirmation Dialogs and Buttons
Run Time 28:41Next 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.
-
Inline SVGs Using Render Functions
Run Time 15:21Our 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.
-
-
*Series still in development. Check back often for updates.
The most concise screencasts for the working developer, updated daily.
There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!