Search

Nalezeno "vue": 25

An Early Look at the Vue 3 Composition API in the Wild


I recently had an opportunity to try the new Vue Composition API in a real project to check where it might be useful and how we could use it in the future. Until now, when we were creating a new component we were using Options API. That API forced us to separate the component’s code by options...

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...

Creating Dynamic Routes in a Nuxt Application


In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly common use-case: you get data from an API, and you either don’t know exactly what that data might be, there’s a lot of it, or it might change....

How I Created a Code Beautifier in Two Days


I recently drew up a wireframe for a code beautifier. The next day, I decided to turn it into a real tool. The whole project took less than two days to complete. I'd been thinking about building a new code beautifier for a while. The idea isn't unique, but every time I use someone else's tool,...

Protecting Vue Routes with Navigation Guards


Authentication is a necessary part of every web application. It is a handy means by which we can personalize experiences and load content specific to a user — like a logged in state. It can also be used to evaluate permissions, and prevent otherwise private information from being accessed...

How to Increase Your Page Size by 1,500% with webpack and Vue


What we don’t have are enough articles showing you how to increase your page size. In fact, the only article I could find was this one from the Geek Squad which ended up being about making the font size bigger. This is a good start, but I think we can do better. The post How to Increase Your Page...

Integrating Third-Party Animation Libraries to a Project


Creating CSS-based animations and transitions can be a challenge. They can be complex and time-consuming. Need to move forward with a project with little time to tweak the perfect transition? Consider a third-party CSS animation library with ready-to-go animations waiting to be used. Yet, you might...

Making the Move from jQuery to Vue


As someone who has used jQuery for many. years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other. Before I begin though, I want to ensure one thing is crystal clear. I am not, in any way whatsoever...

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...

Form Validation in Under an Hour with Vuelidate


Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate is personally my favorite option for validations because it doesn't require...

Creating a Reusable Pagination Component in Vue


The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation means creating a list. Depending on the amount of data and its content, we may decide...

Advanced Tooling for Web Components


Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, we dove into creating our own custom element....

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,...

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...

Poslední sobota #100 celodenní konference


24. listopadu se v pražské Paralelní Polis opět uskuteční sraz webových vývojářů Poslední sobota alias PoSobota. Ku příležitosti 100. jsme se rozhodli ji uchopit trošku jinak. Větší. Okruh témat je různorodý, ale blízký webovému…

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...

Vue + TypeScript: A Match Made in Your Code Editor


Vue is so hot right now and I’ve been thinking of doing a serious project with it since quite a while, so when the opportunity popped up, I hopped in. But there was a little problem — one of the requirements of the project was to write it in TypeScript. At first, I was super stressed about...

Building a RSS Viewer With Vue: Part 2


Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an "initial" version. I took some...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace