tag: Vuejs

After spending years 😏 building applications with Nuxt.js (and occasionally dipping into Next.js), I decided to take a step back to pure Vue 3 and create a.. lo and behold - a Google Keep alternative. Just kidding - the app is far more dumb. Notocan: A Dumb Google Keep Alternative Notocan is what I like to say “deliberately dumb”, local and fast. It’s not trying to be the next big productivity platform with AI features, cloud sync complexity, or fancy collaboration tools. It’s just notes, done right in a browser window. ...

Today, I’m excited to introduce utils.techformist.com – a collection of client-side web utilities designed to make developers’ lives easier. Built with speed, simplicity, and privacy in mind, this tool suite aims to be your go-to resource for common development tasks. Why Another Utility Site? The web is full of utility sites, but many come with drawbacks: Intrusive ads and analytics Server-side processing of potentially sensitive data Slow loading times Inconsistent UI/UX utils.techformist.com addresses these issues by keeping everything client-side, ensuring your data never leaves your browser. The site loads quickly, works offline, and offers a clean, consistent interface for all tools. ...

We will walk through the steps to build a document analysis web application using Nuxt 3 and Azure Document Intelligence. This application allows users to - Features will include - 🔍 Create/pass a template in HTML and placeholders for values 🕶️ Real-time document analysis status 💾 Download merged content as PDF Here’s a quick demo. While the demo showcases invoice generation, the same program can be extended to any document type - filled application forms, documents, etc. ...

We will walk through the steps to build a document analysis web application using Nuxt 3 and Azure Document Intelligence. This application allows users to - upload PDF or images specify fields (if needed) extract specific fields of information Features will include - 🔍 Extract custom fields from identification documents 🔄 Real-time document analysis status 💾 Download extracted data as JSON 🎨 UI with Shadcn-vue /Tailwind CSS Here’s a quick demo. ...

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