category: Vue

Gone are the days when we depended on styling libraries to provide fast access to icons and go through untold suffering due to payload size, performance issues etc.. With the advent of SVG, we can use icons from a variety of sources. We will see how to do just that. SVG images have the advantage of - Being vector based, so it can be scaled to any size “Is just text” Can be styled Small in size! Using SVG Icons: Why do that? You see in the old west, we used to have icons like this - ...

First, let me clarify what I mean by “dynamic image”. Imagine the below situations - You are rendering a list of products and their images. The image may be stored in local folder or coming in from S3/comparable infrastructure You want to change image / make image interactive. For e.g., users select fruits and the corresponding fruit image gets added in a basket You want to preprocess the image in some shape and form at runtime. For e.g., watermarking the image Rendering an Image Typically, you render images with - ...

I have a full-time job that does not involve active web development. I am, however, on the constant look-out for the next big thing that will solve all my life’s problems.., by quickly creating apps that is. Vue has always been a tool that I depend on. Vue is quite easy to understand, use and build apps with. Nuxt just makes it even easier. I found React to be too verbose, generally more complicated, and not fun to work with. With NextJS 14, React Server Components, and the ** huge ** number of NextJS templates out there (not to mention v0.dev), I could kinda see how my workflow could be so much more easier. ...

Let us create a simple Todo app using Nuxt - PrimeVue for styling Store todos in a database Setup Ensure NodeJS is installed. Download and follow instructions here if you don’t have Node installed on your computer. I use pnpm as my package manager. You can use npm or yarn if you prefer. Install pnpm globally using the following command. npm install -g pnpm Create a new Nuxt project. pnpx nuxi@latest init nuxt-primevue-todo This command should initiate a project, install dependencies and also prompt you to initiate a git repository. ...

Teleport is a new feature introduced in Vue 3. Teleport provides better control to developers on where exactly an element is rendered. Get Teleporting Let us create a new Vue 3 app to start playing around with teleport. We will use Vite, because it is 2021. npm init @vitejs/app Provide a project name (teleport) and select vue as the template. Install dependencies and start the app. cd teleport npm i npm run dev Navigate to http://localhost:3000 to see your new app. ...

Hello everyone! Hope you are all set for the new year. While you are waiting for the Y2020 to end with bated breath, here’s a post to kick start your Vue 3 journey. We will create a Reddit reader using Vue3 and Vite! This post is more useful for someone with basic knowledge of Vue and Vue 2. Get Started: Installation Create a Vue 3 project with Vite.. npm create @vitejs/app Select the vue template on prompt to create a new folder for your project. Install dependencies. ...

We have previously seen how a div element can be saved to a file. In this post we will see how we can save div tag contents as an image in Vue. How do we print the div? Here are the steps at a high level - Draw contents of div to canvas. We use a library called html2canvas to create canvas from a specified div. Generate image from canvas Download canvas as an image The print here is equivalent to “taking the screenshot” of a particular section of your app. ...

In this post we will see how to create a simple timesheet app using Vue and Vuetify. This is not quite a comprehensive tutorial on Vue or Vuetify, rather a demo of front-end features, see how easy it is to build an usable app, and in general, how modern app development makes the whole process enjoyable. What are we building? A simple timesheet app that will - enable to enter time on a day enable export of time data We will store everything in browser storage and there will be no standard persistence layer. This app may or may not plugin to backend (Firebase? ExpressJS / Fastify? Hasura? Other?) in the future - comment and let me know if you’re interested in seeing that! ...

Tooltips are omnipresent, or rather have to be. While there have been excellent standardisation of user experience since we saw what Bootstrap was capable of, there are days and applications that can throw off users with strange icons, buttons and navigation. Ergo, tooltips. The humble tooltip can provide helpful hints, short messages and guide user on what a particular button, text box or any other element will do before clicking the thingy and causing destruction of a planet. ...

Dialogs are those thingies that popup on your UI and are handy to allow users to perform actions without navigating away from the screen. For example, here’s one that enables users to create new request.. .. and here’s an example from Vuetify site that shows a short message. The v-dialog component is the recommended way to show confirmation dialogs too. While confirmation dialogs are great, they could get annoying if used in three hundred different places. For e.g. what do you do if you need a yes/no confirmation dialog? ...