Select Page

Category: vue

What Hooks Mean for Vue

Not to be confused with Lifecycle Hooks, Hooks were introduced in React in v16.7.0-alpha, and a proof of concept was released for Vue a few days after. Even though it was proposed by React, it’s actually an important composition mechanism that has benefits across JavaScript framework ecosystems, so we’ll spend a little time today discussing what this means. Mainly, Hooks offer a more explicit way to think of reusable patterns — one that avoids rewrites to the components themselves and allows disparate pieces of the stateful logic to seamlessly work together. The initial problem In terms of React, the problem was this: classes were the most common form of components when expressing the concept of state. Stateless functional components were also quite popular, but due to the fact that they could only really render, their use was limited to presentational tasks. Classes in and of themselves present some issues. For example, as React became more ubiquitous, stumbling blocks for newcomers did as well. In order to understand React, one had to understand classes, too. Binding made code verbose and thus less legible, and an understanding of this in JavaScript was required. There are also some optimization stumbling blocks that classes present, discussed here. In terms of the reuse of logic, it was common to use patterns like render props and higher-order components, but we’d find ourselves in similar “pyramid...

Read More

Storing and Using the Last Known Route in Vue

There are situations where keeping a reference to the last route a user visited can come in handy. For example, let’s say we’re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later. We’re going to cover how to store the last known route and then fetch it when we need it. We’ll be working in...

Read More

Swipeable card stack using Vue.js and interact.js

I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: “Wordguru”) was to create a card game that anyone can play with their friends. You can see the outcome here. One element of the development process was to create an interactive card stack. The card stack had a set of requirements, including: It should contain a few cards from the collection. The first card should be interactive. The user should be able to swipe the card in different directions that indicate an intent to accept, reject or skip...

Read More

Building a Donut Chart with Vue and SVG

Mmm… forbidden donut.” – Homer Simpson I recently needed to make a donut chart for a reporting dashboard at work. The mock-up that I got looked something like this: My chart had a few basic requirements. It needed to: Dynamically calculate its segments based on an arbitrary set of values Have labels Scale well across all screen sizes and devices Be cross-browser compatible back to Internet Explorer 11 Be accessible Be reusable across my work’s Vue.js front end I also wanted something that I could animate later if I needed to. All of this sounded like a job for...

Read More

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots. For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or even another component). There are three types of slots: default / unnamed slots: used when you have a single slot in a...

Read More
www.000webhost.com