Wednesday, November 6

Tag: Vue

Web Tricks

Reactivity In Vue

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions. This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3. We’re going to build a simple application to better understand this topic. The code for this app can be found on GitHub. By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy. let framework = 'Vue'; let sentence = `${framework} is awesome`; console.log(sentence) // logs "Vue is awesome" framework = 'React'; console.log(sentence) //...
CSS Tricks, Web Tricks

Quick LocalStorage Usage in Vue

localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I’ve personally used it in each! In cases where you’re storing something small for the user that doesn’t need to be kept permanently, localStorage is our friend. Let’s pair localStorage with Vue, which I personally find to be a great, and easy-to-read developer experience. Simplified example I recently taught a Frontend Masters course where we built an application from start to finish with Nuxt. I was looking for a way that we might be able to break down the way we were building it into smaller sections and check them off as we go, as we had a lot to cover. localStorage was a gsolition, as everyone was really tracking their own progress personally, ...
CSS Tricks, Web Tricks

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 to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason behind showing only part of the existing data is that we want to keep our applications as performant as possible and avoid loading or showing unnecessary data. If we decide to show our data in "chunks" then we need a way to navigate through that collection. The two most common ways of navigating through set of data are: The first is pagination, a technique that splits the s...
CSS Tricks

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 Vue in this example and put vue-router to use for routing and localStorage to keep the information about last visited route. Here’s an example of what we’ll be working with: First, let’s outline the route structure Our example has a grand total of three routes: /home /hello /goodbye E...
Web Tricks

How to Setup, Build and Deploy Native Apps with Vue

Vue-Native is a framework written by GeekyAnts, it is a framework built to deliver cross platform mobile native applications. It is inspired by the React-native API, hence it gives a developer the ability to build cross platform applications in Vue.js using React Native’s robust system. Vue Native was originally a fork from React-vue, a compiler that gave developers that ability to write Vue and React in the same codebase. In this article, we’ll build a simple application to introduce the APIs and components available in Vue native. We’ll be building a simple application that fetches the trending Gifs on Giphy, using the Giphy API. We’ll also display the Gif and details about it using components like ScrollView, Text, Image etc. Prerequisites To follow this tutorial, you’ll need to have ...