tag: Nuxt

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

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

Nuxt enables automatic routing. All you need to do is - Create the Nuxt app Create Vue pages under pages root directory All pages will automatically be routes in the app - no need for a distinct Vue router definition. Automatic Routes in Nuxt Consider the below pages in an example app https://my-app.com- Create /pages/index.vue for your home page => maps to => https://my-app.com/ Create /pages/contact.vue for your contact page => maps to => (https://my-app.com/contact Create /pages/customers.vue for to display customers => maps to => https://my-app.com/customers The directory structure in pages.. ...

I have always struggled with new projects. Don’t get me wrong - we live in exciting times and all that. But, there is this thing called “conundrum of choice”. There are just too many ways to get things done and the “next shiny thing” syndrome rears its head each and every darn time. I can safely say that I have never really achieved a standard flow to get things started. Why is that important did I hear you ask? ...