Select Page

Category: vue

The Power of Named Transitions in Vue

Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component. A simple example of this is with a single v-if based on a Boolean. When the Boolean is true, the element appears. When the Boolean is false, the element disappears. Normally, this element would just pop in and out of existence, but with the transition component you can control the visual effect. is this visible? Several articles have been written that cover the transition component quite well, like articles from Sarah Drasner, Nicolas Udy, and Hassan Djirdeh. Each article covers different aspects of Vue’s transition component in detail. This article will expand on the topic by focusing on one aspect of the transition component; the fact that they can be “named.” is this visible? The initial change this attribute offers is that the CSS classes injected onto the element during the transition sequence will be prefixed by the given name. Basically, it would be fade-enter instead of v-enter from the example above. This single attribute can go well beyond this simple option. It can be used to leverage certain features of Vue and CSS which allows for some interesting outcomes. Another thing to consider is that...

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