Skip to main content
CSS is fun and cool and I like it.
Article

How to Build Vue Components in a WordPress Theme

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
Article

Moving from Vanilla JavaScript to a Reusable Vue Component

I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we can make that a reusable component by porting it into Vue using basic features that the framework provides.

Why do this at all? Well there are few reasons, but two stand out in particular:

  • Keeping UI in sync with the timer state: If you look at the code from the first post,  it all lives in the timerInterval function, most noticeably the state management. Each time
Read article “Moving from Vanilla JavaScript to a Reusable Vue Component”
Article

Reusable Popovers to Add a Little Pop

A popover is a transient view that shows up on top of a content on the screen when a user clicks on a control button or within a defined area. For example, clicking on an info icon on a specific list item to get the item details. Typically, a popover includes an arrow pointing to the location from which it emerged.

Popovers are great for situations when we want to show a temporary context to get user’s attention when interacting … Read article “Reusable Popovers to Add a Little Pop”

Article

Building “Renderless” Vue Components

There’s this popular analogy of Vue that goes like this: Vue is what you get when React and Angular come together and make a baby. I’ve always shared this feeling. With Vue’s small learning curve, it’s no wonder so many people love it. Since Vue tries to give the developer power over components and their implementation as much as it possibly can, this sentiment has led to today’s topic.

The term renderless components refers to components that don’t render anything. … Read article “Building “Renderless” Vue Components”

Article

Creating Vue.js Component Instances Programmatically

I have been on a Vue.js project that required the ability to create components programmatically. By programmatically, I mean you create and insert the components completely from JavaScript, without writing anything in the template. This article aims to illustrate how different aspects of using components in a template, such as instantiation, props passing, slots, mounting, translates to JavaScript code.