Vuejs on Techformist

Notocan is a simple, local Google Keep alternative

Thu, 02 Oct 2025 06:30:00 +0000

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.

tldr;

Has it been done a million times? Yes.
Has it been done by me in the past? Probably, yes.
Will it deter me from building something dumb again. Absolutely not.

The core features are straightforward:

Create notes with titles and rich text content
Color-code your notes for visual organization
Pin important notes to keep them at the top
Archive notes you don’t need anymore
Search through all your notes instantly
Keyboard navigation

Check it out here: https://notocan.techformist.com

If you are gungho about todo’s and notes - Notocan is open source and available on GitHub.

Feel free to use the app, or just poke around the code!

Back to the Experience

The experience though has been nothing short of refreshing. No more complex configurations, no more wrestling with SSR setups and errors, just pure Vue 3 with the Composition API.

The dev experience is incredibly fast - hot reload is instantaneous, compilation is lightning-quick, and the build process feels almost instantaneous.

It’s amazing how much mental overhead you shed when you don’t have to think about server-side rendering for a client-side notes app. Also, there are no accounts, no subscriptions, no worrying about data privacy or service outages.

Your notes live in your browser’s IndexedDB, which means:

Instant loading (no network calls)
Works offline perfectly
Your data stays yours
Migration from localStorage is handled automatically

The IndexedDB implementation includes pagination for performance, so even with hundreds of notes, the app stays snappy.

Also, I can’t say enough good things about DaisyUI. Every time I use it, I’m reminded why it was my go-to UI library. The component system is thoughtful and the default styles just work without being overwhelming.

Combined with Tailwind CSS, DaisyUI makes building polished interfaces feel effortless. The color system, spacing, and component variants work together seamlessly. It’s the kind of library that gets out of your way and lets you focus on building features, not fighting CSS. And, not having all the code in my repo mocking my design skills. I would like that mocking to be deep insite the node_modules thank you very much.

Conclusion

Building Notocan reinforced some important lessons:

Simple is indeed beautiful
I continue to be undeterred by no one using the applications I build

If you need a simple notes app, check out Notocan - it might just become your new favorite way to jot down thoughts.

Introducing utils@techformist - A Developer's Swiss Army Knife

Tue, 25 Mar 2025 06:30:00 +0000

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.

Key Features

1. Tools that you want to use!

Our collection includes essential utilities that solve real problems :)

Calculator: A simple yet powerful calculator for quick arithmetic operations.
QR Code Generator: Create QR codes for URLs, WiFi networks, contact details, and more with customizable colors.
Password Generator: Generate secure, random passwords with options for length, character types, and complexity.
Barcode Generator: Create various barcode formats with customizable settings for professional or personal use.
Image Converter: Convert images between different formats without uploading them to any server.
Favicon Generator: Quickly create favicons for your website from any image.
Color Picker: Extract and analyze colors from images with support for multiple color formats.
JSON Formatter: Format, validate, and beautify JSON data with easy-to-use controls and copy functionality.
Base64 Converter: Encode and decode text or files to and from Base64 format right in your browser.

.. and so on. Check out the site for the latest updates.

2. Fast Search and Category-Based Organization

A simple tool search is at the heart of the site! At the same time, tools are organized into logical categories for easy discovery:

Code: Developer tools like JSON Formatter and Base64 Converter for everyday coding tasks
Image: Tools for working with images, including QR Code Generator, Barcode Generator, Image Converter, and Favicon Generator
Text: Text manipulation utilities like the Password Generator
Design: Creative tools such as the Color Picker for design work
File: File processing tools like the PDF Compressor
Other: Miscellaneous utilities including the Calculator

This categorization ensures you can quickly find the right tool for your current task.

3. Responsive and Accessible Design

All tools feature:

Fully responsive layouts that work on devices of any size
Dark/light mode support

4. Privacy-First Approach

What sets util.techformist.com apart is its commitment to privacy:

No tracking (except essentials)
No server-side processing
No data storage outside of the browser
No data transmission to any external computer outside of your own browser

Technology Stack

Utils.techformist.com is built on modern web technologies:

Nuxt 3: For its excellent developer experience, automatic routing, and performance optimizations
NuxtUI: Providing a consistent design system and accessible components
Tailwind CSS: For rapid styling and responsive design

The app is client-side only - no database or server processing.

Why Client-Side Only?

The decision to make util.techformist.com entirely client-side was deliberate:

Privacy: Your data never leaves your browser, eliminating privacy concerns.
Performance: No server roundtrips means instant processing of your tasks.
Availability: The site works offline once loaded.
Scalability: Without server costs, the site can scale infinitely.
Simplicity: The architecture remains clean without databases or APIs.

Development Approach

Building the site was straightforward with Nuxt’s module system and NuxtUI’s component library. The development workflow included:

Setting up a Nuxt 3 project with the content and UI modules
Creating a consistent layout and navigation system
Implementing individual utility components
Ensuring responsive design with Tailwind
Optimizing for performance

The entire project required no backend infrastructure, making deployment simple through static site hosting. The site is hosted on Cloudflare Pages.

Looking Ahead

Util.techformist.com is just getting started. Future plans include:

Adding more utility tools based on user feedback!
Implementing more advanced features like tool chaining :)
Improving keyboard shortcuts and accessibility

Conclusion

Util.techformist.com represents my philosophy that web tools should be fast, private, and straightforward. By keeping everything in the browser, I’ve created a resource that respects your data while providing genuinely useful functionality.

Give it a try at utils.techformist.com and let me know what you think.

Create a Client-Side PDF Generator with Nuxt 3

Sat, 01 Mar 2025 06:30:00 +0000

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.

Technology stack -

NuxtJS
Tailwind CSS
PDFJS
CKEditor

Why Client-Side PDF Generation?

Generating PDFs on the client-side offers several benefits:

Performance: Offloading PDF generation to the client’s device reduces server load and leads to faster response times.
User Experience: Users can preview changes in real-time, adjust their inputs, and generate PDFs without a trip to the server.
Cost-Effective: Avoid additional server infrastructure by leveraging modern browsers and their capabilities.
Flexibility: Easily integrate rich text editing and custom templates to create personalized documents.

Who is this post for?

You are trying to roll-out a PDF generator for invoices or filled applications
You are using an external service to generate PDFs
You are not satisfied with server-side PDF generators

Setting Up the Project

Before we start, make sure you have Node.js 18.x or later installed in your computer.

Create a blank Nuxt app.

bunx nuxi@latest init docgen

A key component of our PDF generator is a rich text editor to create templates. We will use CKEditor to achieve just that. We will also use a JSON editor to enable editing JSON data.

bun i ckeditor/ckeditor5-vue ckeditor5 vue3-json-editor

We will use pdfjs to preview and generate PDF, and DomPurify to make sure we are rendering things safer. Also, install types while at it.

bun i dompurify html2canvas jspdf pdfjs-dist pdfmake
bun i -d @types/pdfmake

Add styling and icons.

bunx nuxi@latest module add tailwindcss lucide-vue-next

Develop the app

Rich Text Editor

Rich text editor is one of the main components that enables users to edit templates. You will not need the rich text editor if you don’t plan to edit templates within the app (the template is plain HTML anyway.)

<template>
  <div class="richtext-editor">
    <ckeditor
      v-if="editor && config && modelValue"
      :editor="editor"
      v-model="modelValue"
      :config="config"
    />

    <div
      v-if="previewContent"
      class="preview-overlay prose"
      v-html="previewContent"
    >div>
  div>
template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

import {
  ClassicEditor,
  Autoformat,
  AutoImage,
  Autosave,
  Base64UploadAdapter,
  Bold,
  Essentials,
  // other items - see GitHub link
} from "ckeditor5";

import "ckeditor5/ckeditor5.css";

import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import "ckeditor5/ckeditor5.css";
const isLayoutReady = ref(false);
const editor = ClassicEditor;
const LICENSE_KEY = "GPL"; // or .

const config = computed(() => {
  if (!isLayoutReady.value) {
    return null;
  }

  return {
    toolbar: {
      items: [
        "sourceEditing",
        "|",
        "heading",
        "|",
        "fontSize",
        "fontFamily",
        // other toolbar items. See GitHub link for all buttons
      ],
      shouldNotGroupWhenFull: false,
    },
    plugins: [
      // relevant plugins - see GitHub link
    ],
    fontFamily: {
      supportAllValues: true,
    },
    fontSize: {
      options: [10, 12, 14, "default", 18, 20, 22],
      supportAllValues: true,
    },
    heading: {
      options: [
        {
          model: "paragraph",
          title: "Paragraph",
          class: "ck-heading_paragraph",
        },
        {
          model: "heading1",
          view: "h1",
          title: "Heading 1",
          class: "ck-heading_heading1",
        },
        {
          model: "heading2",
          view: "h2",
          title: "Heading 2",
          class: "ck-heading_heading2",
        },
        {
          model: "heading3",
          view: "h3",
          title: "Heading 3",
          class: "ck-heading_heading3",
        },
        {
          model: "heading4",
          view: "h4",
          title: "Heading 4",
          class: "ck-heading_heading4",
        },
        {
          model: "heading5",
          view: "h5",
          title: "Heading 5",
          class: "ck-heading_heading5",
        },
        {
          model: "heading6",
          view: "h6",
          title: "Heading 6",
          class: "ck-heading_heading6",
        },
      ],
    },
    image: {
      toolbar: ["imageTextAlternative"],
    },
    initialData: "..",
    licenseKey: LICENSE_KEY,
    link: {
      addTargetToExternalLinks: true,
      defaultProtocol: "https://",
      decorators: {
        toggleDownloadable: {
          mode: "manual",
          label: "Downloadable",
          attributes: {
            download: "file",
          },
        },
      },
    },

    placeholder: "Type or paste your content here!",
    table: {
      contentToolbar: [
        "tableColumn",
        "tableRow",
        "mergeTableCells",
        "tableProperties",
        "tableCellProperties",
      ],
    },
  };
});
const modelValue = defineModel();

const props = defineProps<{
  previewContent?: string;
}>();

onMounted(() => {
  isLayoutReady.value = true;
});
script>

<style>
/* include styles */
style>

JSON Editor

Create the JSON editor that is used to edit JSON data.


<template>
  <ClientOnly>
    <div
      class="h-[300px] border border-white/20 rounded-lg overflow-hidden bg-white/5"
    >
      <textarea
        v-model="jsonString"
        class="w-full h-full p-4 font-mono text-sm bg-transparent text-black dark:text-white/90 focus:outline-none"
        @input="handleInput"
        spellcheck="false"
      >textarea>
    div>
    <div v-if="error" class="mt-2 text-red-400 text-sm">
      {{ error }}
    div>
  ClientOnly>
template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useDocumentStore } from "~/stores/document";

const props = defineProps<{ modelValue: Record<string, any> }>();
const emit = defineEmits<{
  "update:modelValue": [value: Record<string, any>];
}>();

const documentStore = useDocumentStore();
const error = ref("");
const jsonString = ref(JSON.stringify(props.modelValue, null, 2));

watch(
  () => props.modelValue,
  (newVal) => {
    const newString = JSON.stringify(newVal, null, 2);
    if (jsonString.value !== newString) {
      jsonString.value = newString;
    }
  }
);

const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement;
  try {
    const parsed = JSON.parse(target.value);
    error.value = "";
    documentStore.isDirty = true;
    emit("update:modelValue", parsed);
  } catch (e) {
    error.value = "Invalid JSON format";
  }
};
script>
<style>
/* include styles */
style>

Create PDF Viewer

PDF viewer shows the PDF after merging data in template.


<template>
  <div class="pdf-viewer">
    <div v-if="loading" class="loading-indicator">
      <div class="spinner">div>
      <div>Generating PDF preview...div>
    div>
    <div v-else-if="error" class="error-message">
      {{ error }}
    div>
    <div v-else ref="canvasContainer" class="canvas-container">div>
  div>
template>

<script setup lang="ts">
import { ref, onMounted, watch, onBeforeUnmount } from "vue";

const props = defineProps<{
  content: string;
}>();

const canvasContainer = ref<HTMLElement | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
let pdfDoc: any = null;
let currentPage = 1;
let pageRendering = false;
let pageNumPending: number | null = null;
let pdfjsLib: any = null;

// Clean up any resources when component is unmounted
onBeforeUnmount(() => {
  if (pdfDoc) {
    pdfDoc = null;
  }
});

// Initialize PDF.js
onMounted(async () => {
  if (process.client) {
    try {
      // Import PDF.js dynamically
      const pdfjsModule = await import("pdfjs-dist");
      pdfjsLib = pdfjsModule;

      // Set worker source - using CDN for the worker
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

      // Generate and render PDF
      await generatePdf();
    } catch (err) {
      console.error("Error initializing PDF.js:", err);
      error.value = "Failed to initialize PDF viewer. Please try again.";
      loading.value = false;
    }
  }
});

// Watch for content changes
watch(
  () => props.content,
  async () => {
    if (pdfjsLib && process.client) {
      loading.value = true;
      error.value = null;
      await generatePdf();
    }
  }
);

// Generate PDF from content
async function generatePdf() {
  if (!pdfjsLib || !process.client) return;

  try {
    // Import pdfMake dynamically
    const pdfMakeModule = await import("pdfmake/build/pdfmake");
    const pdfFontsModule = await import("pdfmake/build/vfs_fonts");

    // Get the default export or the module itself
    const pdfMake = pdfMakeModule.default || pdfMakeModule;

    // Manually set up the vfs with a basic font
    if (!pdfMake.vfs) {
      // @ts-ignore - We know this property might exist
      pdfMake.vfs = pdfFontsModule.pdfMake?.vfs || {};
    }

    // Create a temporary element to parse the HTML
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = props.content || "";

    // Extract text content and structure
    const pdfContent = extractPdfContent(tempDiv);

    // Define the document with basic fonts
    const docDefinition = {
      content: pdfContent,
      defaultStyle: {
        font: "Roboto",
        fontSize: 12,
        lineHeight: 1.5,
      },
      pageSize: "A4",
      pageMargins: [40, 60, 40, 60] as [number, number, number, number],
    };

    // Generate PDF as Blob
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);

    pdfDocGenerator.getBlob(async (blob: Blob) => {
      try {
        // Convert blob to array buffer
        const arrayBuffer = await blob.arrayBuffer();

        // Load PDF document
        const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
        pdfDoc = await loadingTask.promise;

        // Initial/first page rendering
        await renderPage(1);
        loading.value = false;
      } catch (err) {
        console.error("Error rendering PDF:", err);
        error.value = "Failed to render PDF preview.";
        loading.value = false;
      }
    });
  } catch (err) {
    console.error("Error generating PDF:", err);
    error.value = "Failed to generate PDF preview.";
    loading.value = false;
  }
}

// Render the specified page
async function renderPage(num: number) {
  if (!pdfDoc) return;

  pageRendering = true;

  try {
    // Get page
    const page = await pdfDoc.getPage(num);

    // Clear previous content
    if (canvasContainer.value) {
      canvasContainer.value.innerHTML = "";
    }

    // Calculate scale to fit the container width
    const containerWidth = canvasContainer.value?.clientWidth || 800;
    const viewport = page.getViewport({ scale: 1 });
    const scale = containerWidth / viewport.width;
    const scaledViewport = page.getViewport({ scale });

    // Create canvas for each page
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    canvas.className = "pdf-page";

    // Add canvas to container
    canvasContainer.value?.appendChild(canvas);

    // Render PDF page into canvas context
    const renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport,
    };

    await page.render(renderContext).promise;
    pageRendering = false;

    // If there's a pending page, render it
    if (pageNumPending !== null) {
      renderPage(pageNumPending);
      pageNumPending = null;
    }

    // If there are more pages, render them too
    if (num < pdfDoc.numPages) {
      renderPage(num + 1);
    }
  } catch (err) {
    console.error("Error rendering page:", err);
    pageRendering = false;
    error.value = "Failed to render PDF page.";
  }
}

// Extract content from HTML for PDF generation
function extractPdfContent(element: HTMLElement): any[] {
  const result: any[] = [];

  // Process child nodes
  Array.from(element.childNodes).forEach((node: Node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent?.trim() || "";
      if (text) {
        result.push({ text });
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      const elementNode = node as HTMLElement;
      const nodeName = elementNode.nodeName.toLowerCase();

      // Handle different element types
      if (nodeName === "p") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          margin: [0, 5, 0, 10],
        });
      } else if (nodeName === "h1") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 24,
          bold: true,
          margin: [0, 10, 0, 10],
        });
      } else if (nodeName === "h2") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 20,
          bold: true,
          margin: [0, 10, 0, 5],
        });
      } else if (nodeName === "h3") {
        result.push({
          text: elementNode.textContent?.trim() || "",
          fontSize: 16,
          bold: true,
          margin: [0, 10, 0, 5],
        });
      } else if (nodeName === "ul" || nodeName === "ol") {
        const items = Array.from(elementNode.children).map((li) => {
          return { text: li.textContent?.trim() || "", margin: [0, 2, 0, 2] };
        });

        result.push({
          ul: nodeName === "ul" ? items : undefined,
          ol: nodeName === "ol" ? items : undefined,
          margin: [0, 5, 0, 10],
        });
      } else if (nodeName === "table") {
        // Extract table data
        const tableData: string[][] = [];
        Array.from(elementNode.querySelectorAll("tr")).forEach((row) => {
          const rowData: string[] = [];
          Array.from(row.querySelectorAll("td, th")).forEach((cell) => {
            rowData.push(cell.textContent?.trim() || "");
          });
          if (rowData.length > 0) {
            tableData.push(rowData);
          }
        });

        if (tableData.length > 0) {
          result.push({
            table: {
              body: tableData,
              widths: Array(tableData[0].length).fill("*"),
            },
            margin: [0, 5, 0, 10],
          });
        }
      } else {
        // Recursively process other elements
        const childContent = extractPdfContent(elementNode);
        if (childContent.length > 0) {
          result.push(...childContent);
        }
      }
    }
  });

  return result;
}
script>

Include this in a DocumentPreview.vue component that can toggle between PDF viewer and a rich text viewer - if needed, of course.

Layout and Page

Update layout -


<template>
  <div class="min-h-screen bg-surface-ground">
    <nav class="bg-surface-card border-b border-surface-border md:px-12 px-6">
      <div class=" h-16 flex items-center justify-between">
        <h1 class="text-xl font-bold text-black">docgenh1>
        <div class="flex items-center gap-4">
          <button
            variant="secondary"
            :icon="isDark ? 'sun' : 'moon'"
            @click="toggleTheme"
            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
          />
        div>
      div>
    nav>
    <main class=" py-6">
      <slot />
    main>
  div>
template>

<script setup lang="ts">script>

<style>style>

… and the page.

<template>
  <div class="mx-auto px-12">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="flex flex-col gap-6">
        <div class="card">
          <div class="toolbar">
            <h2 class="section-title">Templateh2>
          div>
          <div class="h-[600px] overflow-hidden">
            <ClientOnly>
              <RichTextEditor v-model="template" class="h-full" />
            ClientOnly>
          div>
        div>

        <div class="card">
          
          <div class="toolbar">
            <h2 class="section-title">Data (JSON)h2>
          div>
          <div class="editor-container h-[400px] overflow-hidden">
            <DataEditor v-model="jsonData" class="h-full" />
          div>
        div>
      div>

      <div class="card">
        
        <div class="toolbar">
          <h2 class="section-title">Generated Documenth2>
          <div class="toolbar-actions">
            
          div>
        div>
        <div class="h-[1024px] overflow-hidden">
          <DocumentPreview :data="jsonData" class="h-full" />
        div>
      div>
    div>
  div>
template>

<script setup lang="ts">
import { useDocumentStore } from "~/stores/document";
import { storeToRefs } from "pinia";

const documentStore = useDocumentStore();
const { template, jsonData } = storeToRefs(documentStore);
script>

<style scoped>
/* styles */
style>

Run the app!

bun dev

This should populate some default template and data, and show you a nice preview of the merged content.

Conclusion

Generating PDF on client is not hard and keeps your server load low.

While generating PDFs client-side can certainly help in most use cases (especially for enterprise customers), it may not be a pleasant experience for mobile users. Also, features like emailing PDF, supporting non-PDF formats, etc. are hard to achieve.

See complete code on GitHub.

Document Analysis App with Azure Document Intelligence

Sun, 23 Feb 2025 06:30:00 +0000

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.

While the demo covers only identification documents, the same program can be extended to any document type - application forms, invoices, etc.

Prerequisites

Before we start, make sure you have the following:

Node.js 18.x or later
An Azure account with a Document Intelligence resource
Azure Document Intelligence API key and endpoint

Step 1: Setting Up the Project

Create a blank Nuxt app..

pnpx nuxi@latest init docformist

Get your API key and environment details from Azure site. You can sign up for free and use a Free plan to test out the service.

Create a .env file in the root directory with your Azure credentials:

AZURE_DOCUMENT_INTELLIGENCE_KEY=your_key_here
AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT=your_endpoint_here

Add Nuxt modules -

pnpx nuxi@latest module add shadcn-nuxt
pnpx nuxi@latest module add tailwindcss

Initialize shadcn and tailwind -

pnpx tailwindcss init
pnpx shadcn-vue@latest init

Accept sensible defaults.

Step 2: Configuring Nuxt

Ensure nuxt.config.ts is updated. Add the CSS file reference:

// ...existing code...
export default defineNuxtConfig({
  // ...existing code...
  modules: ["shadcn-nuxt", "@nuxt/icon", "@nuxtjs/tailwindcss"],
  css: ["~/assets/css/tailwind.css"],
  // ...existing code...
});

Add shadcn-vue components.

pnpx shadcn-vue@latest add label button card input separator

Step 3: Creating the Document Uploader Component

Create DocumentUploader.vue in the components folder to handle file uploads:

// filepath: /c:/dev/1p/nuxt/docformist/components/DocumentUploader.vue
<template>
  
template>

<script setup lang="ts">
const emit = defineEmits(["file-selected"]);

const handleFileSelect = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    emit("file-selected", file);
  }
};

const handleDrop = (event: DragEvent) => {
  const file = event.dataTransfer?.files[0];
  if (file) {
    emit("file-selected", file);
  }
};
script>

Step 4: Creating the Document Viewer Component

Create DocumentViewer.vue to preview the uploaded document:

// filepath: /c:/dev/1p/nuxt/docformist/components/DocumentViewer.vue
<template>
  
template>

<script setup lang="ts">
const props = defineProps<{
  file: File;
}>();

const fileUrl = ref<string | null>(null);
const isPDF = computed(() => props.file.type === "application/pdf");

watch(
  () => props.file,
  (newFile) => {
    if (fileUrl.value) {
      URL.revokeObjectURL(fileUrl.value);
    }
    fileUrl.value = URL.createObjectURL(newFile);
  },
  { immediate: true }
);

onBeforeUnmount(() => {
  if (fileUrl.value) {
    URL.revokeObjectURL(fileUrl.value);
  }
});
script>

Step 5: Creating the API Endpoint

Create an API endpoint analyze.post.ts for document analysis with Azure Document Intelligence:

import DocumentIntelligence, {
  getLongRunningPoller,
  isUnexpected,
} from "@azure-rest/ai-document-intelligence";
import { AzureKeyCredential } from "@azure/core-auth";
import formidable from "formidable";
import { readFile } from "fs/promises";

export default defineEventHandler(async (event) => {
  // ...existing code...
});

Step 6: Building the Main Page

Integrate the components and API in the main page index.vue:

// filepath: /c:/dev/1p/nuxt/docformist/pages/index.vue
<template>
  
template>

<script setup lang="ts">
const selectedFile = ref<File | null>(null);
const extractedData = ref<Record<string, any> | null>(null);
const loading = ref(false);
const selectedFields = ref<string[]>([]);

const handleFileSelect = (file: File) => {
  selectedFile.value = file;
  extractedData.value = null;
};

const handleExtract = async () => {
  if (!selectedFields.value.length) {
    console.error("No fields selected");
    return;
  }

  loading.value = true;
  try {
    const formData = new FormData();
    formData.append("file", selectedFile.value!);
    formData.append("fields", JSON.stringify(selectedFields.value));

    const response = await fetch("/api/analyze", {
      method: "POST",
      body: formData,
    });

    if (!response.ok) {
      throw new Error("Failed to analyze document");
    }

    extractedData.value = await response.json();
  } catch (error) {
    console.error("Error analyzing document:", error);
    // TODO: Show error toast
  } finally {
    loading.value = false;
  }
};
script>

Step 7: Run the Application

Start the development server:

pnpm dev

Visit http://localhost:3000 to upload a document and see the results.

Conclusion

That was a quick demo of how we build a document analysis / identification app using Azure Document Intelligence. Customize the application further to meet your needs.

Here’s the Github repo - https://github.com/prashanth1k/docformist.

All of this was done within 2 hours - thanks to AI. The era of personal applications is here.

Teleport in VueJS

Wed, 20 Jan 2021 06:30:00 +0000

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.

Replace the

Vuejs on Techformist

Notocan is a simple, local Google Keep alternative

Notocan: A Dumb Google Keep Alternative

Back to the Experience

Conclusion

Introducing utils@techformist - A Developer's Swiss Army Knife

Why Another Utility Site?

Key Features

1. Tools that you want to use!

2. Fast Search and Category-Based Organization

3. Responsive and Accessible Design

4. Privacy-First Approach

Technology Stack

Why Client-Side Only?

Development Approach

Looking Ahead

Conclusion

Create a Client-Side PDF Generator with Nuxt 3

Why Client-Side PDF Generation?

Setting Up the Project

Develop the app

Rich Text Editor

JSON Editor

Create PDF Viewer

Layout and Page

Run the app!

Conclusion

Document Analysis App with Azure Document Intelligence

Prerequisites

Step 1: Setting Up the Project

Step 2: Configuring Nuxt

Step 3: Creating the Document Uploader Component

Step 4: Creating the Document Viewer Component

Step 5: Creating the API Endpoint

Step 6: Building the Main Page

Step 7: Run the Application

Conclusion

Teleport in VueJS

Get Teleporting

Where to use teleport?

Create Reddit Reader Using Vue 3 & Vite

Get Started: Installation

Setup Vue Router

Setup Views

Home

Posts

App.vue

Change Post View

Variables