Nuxt on Techformist

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.

Manage SVG Icons in Nuxt

Sat, 20 Jan 2024 06:30:00 +0000

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 -

<i class="fa fa-user">i>

With libraries like Vuetify, the above statement looks like this -

<v-icon>mdi-accountv-icon>

The code is easy to use, but you have to depend on the library to provide you the icon. You are also dependent on the library for applying changes to color, size, and probably even for the freaking dark mode.

With SVG, you can use the icon from any source, and apply any styling you want.

Using SVG Icons

Getting started with SVG icons is pretty easy.

Identify the SVG
Copy the SVG and paste it directly in a Vue component (OR) Save the SVG in a file and import it in a Vue component

As always the modern web makes using SVG icons trivial. 😜

Method 1: Use direct links to icons

You can use the SVG icon directly in your Vue component.

An example using icongram ie below.

<template>
  <img
    src="https://icongr.am/material/airplane-takeoff.svg?size=128&color=4023d1"
  />
template>

The parameters are self-explanatory. You can see the image, change the size / color and see how URLs are constructed for various icons from the icongram website (linked to Material icons, it can be anything really).

Others doing the same fun stuff -

Ionicons
Iconify
CSS icons - icons are also available as SVG

There is an easier way to use the icons directly. Use something like a NuxtIcon and set it up as a plugin.

And, voila -

<template>
  
  <Icon name="uil:github" color="black" />
  
template>

Method 2: Download and use icons

Any of the sites outlined in the previous section allow you to download the SVG icon. Just save the file in your local public / assets folder and use it in your Vue component.

More example sites providing SVG downloads -

Once the images are available in your project, using them should be as simple as -

<template>
  <img src="images/airplane-takeoff.svg" />
template>

Another way to do this (probably more efficient) is to create a pass through Vue component that renders the SVG. This way you can play around with the size/colors etc. in a more uniform way.

Example Vue component to render a given SVG -

<template>
  <svg
    :viewBox="viewBox"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    class="svg-icon"
  >svg>
template>

<script setup>
  import { defineProps, computed, Component } from "vue";

  defineProps({
    viewBox: { type: String, default: "0 0 24 24" },
    width: { type: String, default: "24" },
    height: { type: String, default: "24" },
  });
script>

Invoke the component as any other Vue component. This approach has the advantage of consistency in the way you render the SVG icons - e.g., use similar sizes, color, etc.

Method 3: Just paste the SVG

As an alternative to downloading icons, just paste the SVG in your Vue component.

For e.g. -

<svg
  data-slot="icon"
  fill="none"
  stroke-width="1.5"
  stroke="currentColor"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
  >path>
svg>

As outlined in the previous section, you can also paste the SVG in a separate Vue component and use that component in your project.

Use Dynamic Images in Nuxt

Sun, 14 Jan 2024 06:30:00 +0000

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 -

<img src="https://example.com/images/apple.png" />

This assumes that images/apple.png exists in public folder or available publicly.

Rendering a Dynamic Image

While providing images from a public location is great (& should be preferred), sometimes we need the images to be “processed” during build, or make it “dynamic” in some way or the other (e.g., watermarked on the go). I typically use assets/images for images that need not be publicly exposed - but any folder should work well.

Pointing images to the assets or some other folder is straight-forward in Nuxt2.

<template>
    <img :src="require(`~/assets/images/${apple.image}`)"/>
</template>

require works since Nuxt2 uses Webpack, which will get the import image dynamically and make it available for rendering on the page.

Nuxt3 and Vite do not work in the same way. There is more than one way to render dynamic images in Nuxt 3.

1. Using `glob`

As mentioned here, you can use glob to feed the right input to the image -

<template>
  <img :src="fruit_name" />
template>

<script setup>
  import { filename } from 'pathe/utils';

  const glob = import.meta.glob('~/assets/images/*.png', { eager: true });
  const images = Object.fromEntries(
    Object.entries(glob).map(([key, value]) => [filename(key), value.default])
  );

  const fruit_name = 'apple';
script>

This option works, but is tiring to look at. There may also be performance issues if there are large number of images.

Note that the issue described here exists for local images. Remote images provide public URLs that can be rendered directly.

2. Use Vite require plugin

Bring the usability of Webpack require to Vite using vite-plugin-require plugin.

Install the plugin -

npm install -D vite-require-context

Change vite.config.js to add the plugin -

import vitePluginRequire from "vite-plugin-require";

export default {
  // ...
  plugins: [vitePluginRequire()],
  // ...
};

Nuxt (specifically NuxtImg) provides a helpful useImage composable.

You should now be able to do -

<template>
  <NuxtImg :src="require(fruit_image_url)" />
template>

<script setup>
  const fruit_image_url = "~/assets/images/apple.png";
script>

Conclusion

While both options work, do note that -

Use public for images that will not change. This option is easier and likely to be more performant
Else, use one of the above options based on your use case

Nuxt/Vue and Next/React - A Predicament

Sun, 03 Dec 2023 06:30:00 +0000

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.

The big question though was - “does Next+React really deliver the goods for me”. And thus began a long time “investing” effort to find out what should be my stack of choice for the foreseeable future.

tldr; It does not matter. Stick to the tooling that you like.

Before we move forward, for those of you who want all the other libraries & frameworks considered - yes, I do code in them from time to time. No, they cannot be my go-to choice since I need to create things quickly lest I lose my interest and having lot of people out there simply means I can look forward to more answered questions and getting away with my scrappy “expertise”.

The Need

I am largely interested in building applications that help organize data, and provide ways to get things done in general. While not strictly focused on enterprises, they will border on things like -

CRM/ERP’s of the world
Project organization
People and task management for specific focus areas like recruitment, vendor management, etc.

My typical apps have -

Forms
Data tables
A few charts, reports and such

Indirectly, I need -

Ability to switch b/w real-time and classic fetching of updates
Easier state management
Ability to create a lot of reusable components
Ability to integrate with many libraries that can integrate well with documents, tables, reports and so forth

The Comparison Factors

Given the need is so generic and seem straight-forward at the outset, it is easy to get carried away. I decided to focus on a few seemingly random factors that I find useful or problematic.

Component Structure
Server-Side Rendering & Data Fetching
State Management
Performance
Developer Experience

Component Structure

Components are building blocks of any app. They are the ones that make up the UI and the logic behind it.

Creating components in Vue has been a breeze. The single file component structure is a joy to work with.

Everything is neat and organized - from code, to styles, to the HTML
The separation of concerns is easy to manage
Code for reactive UI looks intuitive and easy to understand
Reusable code can be managed through Components and Services. Auto imports in Nuxt make it even easier to use them

<template>
  <div>
    <h1> {{ title }} h1>
  div>
template>

<script setup>
const title = 'Hello World'
script>

React is not far off from here -

export default function App() {
  return (
    <div className="App">
      <h1>Hello Worldh1>
    div>
  );
}

A somewhat more complexified version can be -

import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  return (
    <div>
      <input value={newItem} onChange={e => setNewItem(e.target.value)} />
      <button onClick={addItem}>Addbutton>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}li>
        ))}
      ul>
    div>
  );
}

Vue still manages to look clean -

<template>
  <div>
    <input v-model="newItem" />
    <button @click="addItem">Addbutton>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}li>
    ul>
  div>
template>

<script setup>
import { ref } from 'vue';


const items = ref([]);
const newItem = ref('');

const addItem = () => {
    items.value.push(newItem.value);
    newItem.value = '';
};

script>

I had a hard preference for Vue structure (think Options API), but not any more.

Reactivity is easy to write & manage in Vue. Just use ref / reactive and you are good to go.
Intuitive code in templates and script. Cleaner separation of concerns
Bidirectional data binding is a breeze
Template helpers like v-for, v-if are a God-send

Server-Side Rendering & Data Fetching

React Server Components make it easier to write server-side code and have the right mix of client and server logic in the same component.

For example, I could fetch posts data from server and send the HTML to the client.

import { useEffect, useState } from 'react';

export default function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  if (posts.length === 0) {
    return <div>Loading...div>;
  }

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}h2>
          <p>{post.body}p>
        li>
      ))}
    ul>
  );
}

No haggling around with API calls, no moving around JS to get basic things done, and more control over how/who fetches data.

If I use Nuxt for the same problem, here’s how the component looks like -

<script setup>

const { data: posts } = await useAsyncData(() => $fetch('https://jsonplaceholder.typicode.com/posts'))
script>

<template>
    <div>
        <div v-for="post in posts" :key="post">
            {{ post }}
        div>
    div>
template>

See Nuxt SSR.

RSC is a hard win for React. Next components are server by default, and mixing server / client components without a care for the world is enticing. While Nuxt makes it easy to build data fetching on top of Vue, it just does not compare to the magic of RSC.

That said, I really love the Vue way of doing things -

don’t worry about useEffect and other thousand hooks
no easy foot-guns causing performance issues or code spaghetti
clean, easy to understand template

Many other SSR and data fetching features exist, but are not super important for me.

State Management

Using state management in React can be tricky. There are many ways to do it, and each has its own pros and cons. Let us see an example of a simple todo app using Zustland.

The component will look something like this -

import React from 'react';
import useStore from './store';

const TodoApp = () => {
  const todos = useStore(state => state.todos);
  const addTodo = useStore(state => state.addTodo);
  const toggleTodo = useStore(state => state.toggleTodo);
  const removeTodo = useStore(state => state.removeTodo);
  const [newTodo, setNewTodo] = React.useState('');

  const handleAddTodo = () => {
    addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <input value={newTodo} onChange={e => setNewTodo(e.target.value)} />
      <button onClick={handleAddTodo}>Add Todobutton>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(index)} />
            {todo.text}
            <button onClick={() => removeTodo(index)}>Removebutton>
          li>
        ))}
      ul>
    div>
  );
};

export default TodoApp;

.. and the store -

import create from 'zustand';

const useStore = create(set => ({
  todos: [],
  addTodo: (text) => set(state => ({ todos: [...state.todos, { text, completed: false }] })),
  removeTodo: (index) => set(state => {
    const newTodos = [...state.todos];
    newTodos.splice(index, 1);
    return { todos: newTodos };
  }),
}));

export default useStore;

In the Vue world, Pina (or even Nuxt state mgt.) is quite easy to use. The component is simpler but comparable -

<template>
  <div>
    <input v-model="newTodo" type="text">
    <button @click="addTodo">Add Todobutton>

    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">Removebutton>
      li>
    ul>
  div>
template>

<script>
import { ref } from 'vue';
import { useStore } from './store';

export default {
  setup() {
    const store = useStore();
    const newTodo = ref('');

    const addTodo = () => {
      store.addTodo(newTodo.value);
      newTodo.value = '';
    };

    return {
      todos: store.todos,
      newTodo,
      addTodo,
      removeTodo: store.removeTodo,
    };
  },
};
script>

Here’s how the store looks like -

import { defineStore } from 'pinia';

export const useStore = defineStore({
  id: 'todos',
  state: () => ({
    todos: [],
  }),
  actions: {
    addTodo(text) {
      this.todos.push({ text, completed: false });
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
  },
});

I find Vue easier to use for arrays, object processing, and that trend continues for stores. But, I can totally understand how majority of the people out there feel as strong about React.

Performance

Performance has not been a straight-forward and direct aspect of choosing a frontend framework. Most of the apps I build use database, data fetching from multiple sources, and components like maps/ charts - all of which shift performance considerations elsewhere.

I tend to rely on and follow the benchmarks published by talented people out there.

krausest/js-framework-benchmark
.. or more theoritical exercises like this

There are not going to be any clear answers here, but Vue and React perform on par with each other.

Developer Experience

In general I am strongly biased towards the Vue way of working.

I have tried to change my ways multiple times - for React, Blazor, Astro, HTMX and so forth - but keep picking up Nuxt/Vue for real projects. This may be more of a reflection of my own laziness than anything else.

I do like the fact that -

Vue is easy to learn and use
Nuxt makes it quite easy to build apps
Has a decent ecosystem of libraries and tools

React and NextJS have always been the tools that I will certainly choose in the “next” project.

A larger community implies many more people answering questions that an amateur like me tends to have
Many starter templates - including a few that are targeted at SaaS apps
More AI generator friendly since they are used by more people and have many more repositories available publicly. However, React Server Components and the frequent NextJS changes somewhat blunt that advantage
v0.dev is a significant advantage too
Framework of frameworks like RedwoodJS, BlitzJS help stitch together many other tools and libraries to create a full-stack app
Styling libraries like Chakra UI, mui seem to be far more popular than their Vue counterparts

Conclusion

There are no significant advantages or limitations of using either of the options.

I see my own Vue + Nuxt bias, which has nothing to do with the tools themselves. While I continue to use Vue, I will have a keen eye on how React Server Components evolve and how Vue Vapor potentially changes the game.

If you are new to the ecosystem, build a few apps with either and see which option you like more. You may find yourself using both at one time or the other - so don’t get too bogged down by the choices.

Building a Todo App using Nuxt, PrimeVue and SQLite

Sat, 14 Oct 2023 06:30:00 +0000

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.

Next, install PrimeVue..

pnpm install primevue

..and follow instructions to enable PrimeVue for Nuxt.

While at it, let us also install a few additional libraries that will help with styling.

pnpm add primeflex primeicons

Add below content in nuxt.config.js to enable PrimeVue.

export default defineNuxtConfig({

// ...
css: [
    "public/themes/light/theme.css",
    "~/assets/styles.scss",
    "primeicons/primeicons.css",
    "primeflex/primeflex.css",
  ],

  build: {
    transpile: ["primevue"],
  },
modules: ["nuxt-primevue"],
primevue: {
    usePrimeVue: true,
    options: {},
    components: {
      prefix: "",
      name: undefined,
      include: "*",
      exclude: undefined,
    },
// ...
})

Note that we have included all primevue components in the components section. Typically you use include and exclude to be selective about the components to be included for the project.

Next, we will include some custom styling. Since I am lazy, I will get inspired by a free template provided by PrimeVue called SakaiVue

Create a file assets/styles.scss -

@import "layout/layout.scss";

Create a new file styles/layout/layout.scss and add below content.

@import "./_variables";
@import "./_mixins";
@import "./_preloading";
@import "./_main";
@import "./_topbar";
@import "./_config";
@import "./_content";
@import "./_footer";
@import "./_responsive";
@import "./_utils";
@import "./_typography";

The individual files will have some custom styling elements - you will find them in the repo here. Again, all the circus with styling is not quite necessary for the simple app we are building, but is simply included to force a structured approach.

Start server with the command pnpm run dev and you should see the following screen.

Add a navigation bar to the app. Create a new file components/NavbarAnon.vue and add below content. I used Anon suffix to denote that the toolbar is for anonymous user - I have found it easier to have a separate toolbar for logged-in users (not quite relevant here).


<template>
    <Toolbar class="layout-topbar">
        <template #start>
            <NuxtLink to="/">
                <NuxtImg alt="logo" src="../assets/images/todo-logo.png" sizes="150vw sm:100vw md:200vw" class="mr-2" />
            NuxtLink>
        template>

        <template #end>
            <i class="pi pi-question-circle">i>
        template>
    Toolbar>
template>

<script setup>
import Toolbar from 'primevue/toolbar';
script>

Create a default layout for the app with a new file layouts/default.vue and add below content.

<template>
    <div>
        <NuxtLoadingIndicator />
        <NavbarAnon />
        <div class=layout-main-container>
            <div class=layout-main>
                <slot>slot>
            div>
        div>
        <Footer>Footer>
    div>
template>

Create the home page pages/index.vue and add below content.

<template>
    <div class="grid">
        <div class="col-12">
            <Hero />
        div>
        <div class="col-12 mt-12" id="features">
            <Features />
        div>
        <div class="col-12 mt-12">
            <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
                <div class="text-700 text-center">
                    <div class="text-900 font-bold text-5xl mb-3">What are you waiting for? It's free for individual use!
                    div>
                    <div class="text-700 text-2xl mb-5">Experience the task organizing super powerdiv>
                    <Button label="Sign up" icon="pi pi-discord"
                        class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap">Button>
                div>
            div>
        div>
    div>
template>

The page will use the default layout. The individual components are not much to speak about - you will find them in the repo.

You should now see a nice looking home page at http://localhost:3000.

I did include a second layout for the logged-in user in the repo, but am not discussing that here (useful in cases where I need a different toolbar, sidebar navigation for the actual app, for example).

Setup Drizzle & Data Migrations

Let us setup Drizzle ORM and Drizzle Kit. The latter is used for migrations and other admin tasks.

pnpm i drizzle-orm better-sqlite3
pnpm i -D drizzle-kit

Create a new file drizzle.config.js and add below content.

export default {
  schema: "./data/schema_*.js",
  out: "./data/migrations",
  driver: "better-sqlite",
  dbCredentials: {
    url: "./data/data.db",
  },
};

The schema file is going to be used by default by Drizzle CLI. While we do the actual migrations, all we need to do is pnpm exec drizzle-kit generate:sqlite and the migration files are automatically created in the out folder. We will see this in action in a second.

First, let us create a simple table. Create a new file ./data/schema_user.js and add below content.

import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";
import { sql } from "drizzle-orm";

export const user = sqliteTable("user", {
  id: integer("id").primaryKey(),
  firstName: text("first_name"),
  lastName: text("last_name"),
  email: text("email").unique(),
  created: text("created").default(sql`CURRENT_TIMESTAMP`),
  updated: text("updated").default(sql`CURRENT_TIMESTAMP`),
});

Let us also create the table for our todos. Create a new file ./data/schema_todo.js and add below content.

import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";
import { sql } from "drizzle-orm";

export const todo = sqliteTable("todo", {
  id: integer("id").primaryKey(),
  firstName: text("title"),
  lastName: text("status"),
  created: text("created").default(sql`CURRENT_TIMESTAMP`),
  updated: text("updated").default(sql`CURRENT_TIMESTAMP`),
});

Create the migration file.

pnpm exec drizzle-kit generate:sqlite

You could also suffix --out data/migrations --schema data/schema_user.js if you want to be explicit about the output folder and schema file.

Run the migration.

pnpm exec drizzle-kit push:sqlite

You can see browse the SQLite database and see the table created using the Drizzle tool (pnpm exec drizzle-kit studio & point the browser at the URL), or using a tool like DB Browser for SQLite.

Creating the Server API

Nuxt is great for the frontend, but also features a full-fledged node server / framework based on h3.

We will use this server to create a test API.

Create a new file server/api/hello.js with below content -

export default defineEventHandler((event) => {
  return { message: "Hello world!" };
});

You can also use the nuxi command to generate the api.

pnpx nuxi generate api hello

When your Nuxt server is running, you can hit this route at http://localhost:3000/api/hello to see the response.

Now that we know the server works, let us create our first API. Create a new file server/api/user-exists.js and add below content.

import { user } from "~/data/schema_user";
import { db, sqlite } from "../dbservice";
import { eq } from "drizzle-orm";

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event);
    console.log(
      "Initiated user find. Got body: ",
      body,
      " and search param: ",
      body?.email
    );

    const resp = await db
      .select()
      .from(user)
      .where(eq(user.email, body?.email || ""))
      .get();

    console.log("Search results:", resp);

    if (resp?.id != undefined) return { userExists: true };
    else return { userExists: false };
  } catch (e) {
    console.error("Error: ", e);
    throw createError(500, e);
  }
});

The code is self explanatory -

We collect the body from incoming message to get email
Search for the user in the database with Drizzle. dbservice is a simple wrapper around Drizzle to make the connections and queries simpler
Return a response with userExists flag

Create a new file server/dbservice.js and add below content.

import { drizzle } from "drizzle-orm/better-sqlite3";
import Database from "better-sqlite3";

export const sqlite = new Database("data/data.db");
export const db = drizzle(sqlite);

Use your favourite REST client to test the API. Pass in a JSON body with email and you should see a response with userExists flag.

Input -

{
    "email": "a@a.com"
}

Output -

{
    "userExists": false
}

Add User Registration/Login Page

Create a new file pages/signup.vue and add below content.

<script setup>

const email = ref('');
const password = ref('');
const userExists = ref(false);

async function checkUserExists() {
    const { data } = await useFetch('/api/user-exists', {
        method: 'POST',
        body: JSON.stringify({ email: email.value })
    });
    console.log('checkUserExists data: ', data);
    userExists.value = data.userExists;
}
async function createUser() {
    const { data } = await useFetch('/api/user-create', {
        method: 'POST',
        body: JSON.stringify({ email: email.value })
    });
    console.log('createUser data: ', data);
    userExists.value = data.userExists;
    await navigateTo('/dashboard')
}
script>

<template>
    <div class="surface-ground flex align-items-center justify-content-center ">
        <div class="flex flex-column align-items-center justify-content-center">
            data:{{ data }}
            <img src="../assets/images/todo-logo.png" alt="todo app" class="mb-5 w-6rem flex-shrink-0" />
            <div
                style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
                    <div class="text-center mb-5">
                        <i class="pi pi-user" style="font-size: 2.5rem">i>
                        <div class="text-900 text-3xl font-medium mb-3">Hello Chief!div>
                        <span class="text-600 font-medium">Are you ready to get organized?span>
                    div>

                    <div>
                        <label for="email1" class="block text-900 text-xl font-medium mb-2">Emaillabel>
                        <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-30rem"
                            v-model="email" @change="checkUserExists" />
                        <div class="flex align-items-center justify-content-between mb-5 gap-5">
                            <small>Login if your user/email id is found. Else, just create one!small>
                        div>

                        <label for="password1" class="block text-900 font-medium text-xl mb-2"
                            v-if="userExists">Passwordlabel>
                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
                            class="w-full mb-3" inputClass="w-full" :inputStyle="{ padding: '1rem' }" v-if="userExists">
                        Password>

                        <Button label="Signup / Login" class="w-full p-3 text-xl" @click="createUser">Button>
                    div>
                div>
            div>
        div>
    div>
template>

You now have a registration / login page.

Go ahead and enter any email id and you are registered! We will not be adding a full-fledged login function in this post (we need to use some sort of auth library like Lucia to do that).

You may be wondering on why registration and login functions are combined and not two separate pages. You cannot go wrong with either, but the common page is advantageous when you support different types of authentication (e.g., Google, Facebook, custom etc.).

Add Todo API

Create two new APIs to handle get and post. We will use “proper” conventions this time around.

First, create a new file server/api/todo.get.js and add below content.

import { todo } from "~/data/schema_todo";
import { db } from "../dbservice";

export default defineEventHandler(async (event) => {
  try {
    const resp = await db.select().from(todo).all();

    console.log("Search results - todo:", resp);

    return resp;
  } catch (e) {
    console.error("Error: ", e);
    throw createError(500, e);
  }
});

todo.get.js will handle requests to get all todo’s. If there was a need to get a specific todo, I would create a similar file server/api/[id].get.js and handle the request there.

Let us also code to handle post - create a new file server/api/todo.post.js and add below content.

import { todo } from "~/data/schema_todo";
import { db } from "../dbservice";
import { eq } from "drizzle-orm";

export default defineEventHandler(async (event) => {
  try {
    const body = await readBody(event);
    console.log("todo body: ", body);
    const newTodo = { ...body };
    const resp = await db.insert(todo).values(newTodo).run();
    console.log("inserted todo: ", resp);

    const todoResp = await db
      .select()
      .from(todo)
      .where(eq(todo.id, resp?.lastInsertRowid))
      .get();

    return todoResp;
  } catch (e) {
    console.error("Error: ", e);
    throw createError(500, e);
  }
});

Key points to note -

const newTodo = { ...body } may be useless in this situation, but is more relevant when using types or performing validations on the incoming message
The insert function returns a response with lastInsertRowid - we use that to get the newly created todo and return it to the caller. Calling function in client will use the data to update the UI. Again, the relevance may be lost here, but is a good practice since database commit may populate fields, add timestamps etc. and the client needs the updated info

Add Todo Page

Create a new file pages/dashboard.vue and add below content.

<script setup>
import { ref } from 'vue';

const todos = reactive({});
const title = ref('');

async function getTodos() {
    const { data } = await useFetch('/api/todo');
    console.log('getTodos data: ', data);
    todos.value = data;
}
async function createTodo() {
    const { data } = await useFetch('/api/todo', {
        method: 'POST',
        body: JSON.stringify({ title: title.value, status: 'in progress' })
    });
    console.log('createTodo data: ', data);
    todos.value.push(data);
}
// execute getTodos on mounted
onBeforeMount(() => {
    console.log('Fetching todos..');
    getTodos();

})
script>

<template>
    <div class="grid">
        <div class="col-12">
            <div class="card">
                <h5>Add Todoh5>
                <div class="field p-fluid">
                    <label for="title">Descriptionlabel>
                    <InputText id="title" type="text" v-model="title" />
                div>
                <div class="col-12">
                    <Button @click="createTodo">AddButton>
                div>
            div>
        div>


        <div class="col-12">
            <div class="card p-fluid">
                <h5>My Todosh5>
                <div v-if="!todos && todos.value.length <= 0">
                    No todos yet.
                div>
                <DataView :value="todos.value" v-else>
                    <template #list="slotProps">
                        <div class="col-12">
                            <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                                <div class="text-2xl font-bold text-900">{{ slotProps.data.title }}div>
                            div>
                        div>
                    template>
                DataView>
            div>
        div>
    div>
template>

This page will allow user to create new todo’s and also query the API for todo’s.

Note that-

We have used onBeforeMount to execute the getTodos function on page load. While onMounted is the more common way to do this, onBeforeMount gets triggered for page refreshes as well
DataView and DataTable in PrimeVue makes it quite easy to display list data. I have used DataView here, but DataTable can be more beneficial for larger data sets
Typical apps need some validation on the forms - both on the page and on the server. I have not included that here for brevity

And, that’s a wrap for today, folks.

Conclusion

Nuxt can easily be a full-stack app
I cannot get myself to like Nuxt as the go-to full stack app
- I am spoilt by the ease-of-use of a server framework - middleware, routes, controller/service included
- My typical servers include functions that are not covered here and would need separate treatment anyway - e.g., batch processing / scheduled jobs
- Server/client architecture looks cleaner to read / code
- I perceive the typical server/client segregation to be easier to maintain without forcing a hard push for all concerns
Also in other news-
- I have come to admire Drizzle but cannot get over the intuitiveness of knex. Also, I have come to fear the sometimes drastic changes happening in smaller libraries across versions
- PrimeVue will probably be my new library of choice (was Vuetify earlier)

I keep looking for “one perfect way” to get things done faster (I am more of a casual developer), but that is still in the future I guess.

Routing and Route Auth in Nuxt

Wed, 05 Aug 2020 06:30:00 +0000

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

pages/
--| index.vue
--| contact.vue
--| customers.vue

.. is equivalent to the below router file -

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
    },
    {
      path: '/contact',
      component: 'pages/contact.vue',
    },
    {
      path: '/customers',
      component: 'pages/customers.vue',
    },
  ]
}

You can also have dynamic routes -

pages/
--| _id.vue

.. which is equivalent to => https://my-app.com/a1iDThis

.. or nested routes..

pages/
--| customers/
-----| _id.vue
-----| index.vue
--| contact.vue
--| index.vue

.. which will generate => -

Using Route Middleware

Use middleware to perform dark magic on routes. You can protect routes and make them accessible only for authenticated users for example.

Create middleware directory in Nuxt root folder, and create a new file called auth.js therein.

export default function ({ store, redirect }) {
  if (process.client && !store.getters["isLoggedIn"]) return redirect("/login");
}

The above code is doing two things -

check whether current execution context is client (we don’t want this check to happen on server - our cookie/session variables exist in client browser )
if current user is not logged in (provided by isLoggedIn ), redirect to /login page

Tell Nuxt about this middleware - edit nuxt.config.js -

export default {
  // ..
  middleware: ["auth"],
  // ..
};

To use this middleware, just include the below code block in your page -

<script>
  export default {
    middleware: "auth",
  };
script>

Now, Nuxt will redirect user to /login page if not already authenticated (i.e., isLoggedIn is false).

Override Default Behaviour: Bring your own router

You can always assume more control in routing if you are still getting adjusted to the idea of “automatic routing”, or simply have too many things going on during routing.

Use router-module in your Nuxt project.

Install npm i --save @nuxtjs/router

Add to build modules in nuxt.config.js

export default {
  buildModules: ["@nuxtjs/router"],
};

Create router.js in your Nuxt project and include the “normal” router code

import Vue from "vue";
import Router from "vue-router";

import Index from "~/components/index";
import Contact from "~/components/contact";

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: "history",
    routes: [
      { path: "/", component: Index },
      { path: "/contact", component: Contact },
    ],
  });
}

Finis

See more about Nuxt routing.

Structuring your Web App & Nuxt Content Module

Wed, 29 Jul 2020 06:30:00 +0000

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?

Starting a project is what I find more difficult than putting in the hours in the app, or completing the project
I explore available options far too deeply than what sane people do
I lose valuable time in “starting things the right way” rather than focusing on value-adding activities that deliver the goods

So then, it is also safe to say I am forever searching for the one true framework/boiler plate for everything that a person needs to start a project. And that search, ladies and gentlemen, may have taken a big step towards conclusion.

Dramatic drumroll.. Nuxt.

Before I go into why I am rick-rolling(?) Nuxt in all this, let us consider what goes in a web app for low-mid complexity web app.

Structure of the Modern Web App

I roll out products by myself. These are sometimes SaaS products, a few of them paid, and a lot of them created for small & medium scale businesses that are not looking at rapid scaling by the end of the month.

My typical use case will consist of -

Creating the app itself (insert favourite server-side and client-side framework here). This will consist of user auth incl. login/signup pages, app pages, and associated paraphernalia
Create a website that sings hymns about the app. Include a somewhat agreeable home page, pricing, help pages, T&C pages etc.
Create a blog that can provide updates and do a dance or two for SEO

While this is straight forward enough, I had days & nights when I would have nightmares on what things go where, and how should I get stuff done quickly.

SSR or Pre-render
Consistent styling across website and app
Easy to use, editor-friendly blogs
SEO friendly

Meet My Solutions

As I made pretty clear multiple times till now, I don’t have a clear cookie-cutter solution. My go-to solution consisted of -

Using a single page app (always an SPA)
- Connect to backend through RESTful APIs / use web sockets / sessions
- Use pre-render for pages with lot of content
Use a static site generator for the larger site and blog
Go back and forth between components to get them all to work together

Obviously, I could (or should) have steered clear of this mess by using server-rendered pages using templates (think Laravel, or numerous Node frameworks), I somehow did not quite take a firm step in that direction.

My technologies of choice to get things going had been -

Vue - for SPA. Nuxt for added SSR effect
Hugo - for static sites and blog. (OR) Wordpress for sites & blog if I want to feel like living on the edge

I had gravitated towards using Gridsome or Saber for sites/blog since then. They made it a lot easier to keep sites and the app consistent - for a while.

My New Favourite - Nuxt

You may have seen Nuxt in my choice of technologies. So, what changed and why this this big intro that may overshadow the entire post?

Two words - Nuxt content.

Nuxt has been my preferred tool when I need SSR, but I don’t quite like that experience a whole lot. I take issue with -

Increased hot-reload times during development. Yes, this matters for a person like me who makes far too many design mistakes
Added complexity of having to deal with server-side and client-side logic. Also a few libraries tend to become more ape-like with SSR (even with )
Inconsistent, weird build behaviour - especially when I am using Vuetify/ Bootstrap-Vue. (Yes, I cannot reproduce those errors. Yes, I somehow manage to change config and make them go away)

But, more recently I have taken a liking to the “new life cycle of development”.

Nuxt for SPA
Nuxt for the entire site and blog

Now I have -

consistent styling
a common / consistent way of coding
less maintenance work

What changed the game for me was the content module.

Why Content Module is awesome?

My first introduction to the content module was through this article on Nuxt blog - published last month. Like all content on Internet, I bookmarked it and moved on with life.

It was only much later that I started a “oh-so-cool” project, and I looked out for anything new that could help me be a bit more productive. Boy, was I in for a surprise.

Nuxt content does one awesome thing - it sources the content during build and creates the pages that are SEO-friendly, SSR-friendly and can be delivered to the client at the blink of an eye.

Create a content folder and put in your markdown files, JSON, CSV or XML files in there
Point Nuxt to content folder. Enable the module
Fetch your content in relevant pages
Sit back and start building

In other words the content module bestows “static site generation” powers to your Nuxt app without actually making it a static site (nothing wrong with a static site per se).

So, now I could -

Separate out content and presentation layers (greater reuse)
Use one framework for content heavy pages and my app
Choose SSR or SPA and do not make a fuss about overall site vs. app

Getting Started

Start your new nuxt project.

npx create-nuxt-app todo

Install content module.

npm install @nuxt/content

Add module to your nuxt.config file -

{
  //
  "modules": ["@nuxt/content"]
  //
}

You are now ready to unleash your content. Create a content folder in root - you can add any subfolder or files to this folder.

md content
cd content
md blog
cd blog
touch hello.md

Write in your awesome post in hello.md.

---
title: Hello World
description: Here's an obligatory 'hello world' post
createdAt: 2020-01-01
slug: hello
tags:
  - test
  - another
---

# Hello World

I just came here to say that.

Create a template that can render this markdown. Create a folder called blog under the root pages directory.

Create a new file index.vue. This file will be the layout to display our main blog content (e.g. our list of posts) - I am using Vuetify here, but you can use any style library.

<template>
  <div class="posts">
    <v-card
      color="grey lighten-3"
      flat
      width="100%"
      height="150px"
      class="text-center pt-6 pb-6 mb-2"
    >
      <div class="text-h5 grey--text">Blogdiv>
      <div class="grey--text caption mt-8">
        <nuxt-link to="/" class="grey--text">Homenuxt-link> / Blog
      div>
    v-card>
    <v-container>
      <v-row>
        <v-col cols="12">
          <div v-for="post in posts" :key="post.dir">
            <div class="text-h4 font-weight-bold mb-6">{{ post.title }}div>
            <div class="grey--text caption mb-4">
              <span v-if="post.createdAt">
                <v-icon small color="grey">mdi-calendarv-icon>
                {{ post.createdAt.substr(0, 10) }}
              span>
              | Tags:
              <span v-for="(tag, i) in post.tags" :key="i" justify="around">
                <v-chip dense small color="grey lighten-3" class="mr-1">
                  {{ tag }}
                v-chip>
              span>
            div>

            <p>{{ post.description }}p>

            <nuxt-link :to="`/blog/${post.slug}`" class="button"
              >Read morenuxt-link
            >
          div>
        v-col>
      v-row>
    v-container>
  div>
template>

<script>
  export default {
    async asyncData({ params, error, $content }) {
        const posts = await $content('blog', { deep: true }).fetch();
      }
    },
script>

Your discerning mind would have noted a few things here -

We used asyncData in the page to retrieve content. This happens during build time. You are free to work your SEO magic here
You utilise the content read during asyncData like any other Vue variable
You did nothing additional other than a plan-ol’ Nuxt project - which is a good thing

After all that hard work, your Blog is ready to roll.

We did all this without leaving the framework that is also responsible for our app. So, the real question you should be asking now is “have I reached app starter nirvana?”.

Finis

What do you think? What will you do for your next big app!?

Nuxt on Techformist

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

Manage SVG Icons in Nuxt

Using SVG Icons: Why do that?

Using SVG Icons

Method 1: Use direct links to icons

Method 2: Download and use icons

Method 3: Just paste the SVG

Use Dynamic Images in Nuxt

Rendering an Image

Rendering a Dynamic Image

1. Using glob

2. Use Vite require plugin

Conclusion

Nuxt/Vue and Next/React - A Predicament

The Need

The Comparison Factors

Component Structure

Server-Side Rendering & Data Fetching

State Management

Performance

Developer Experience

Conclusion

Building a Todo App using Nuxt, PrimeVue and SQLite

Setup

Home Page & Navigation

Setup Drizzle & Data Migrations

Creating the Server API

Add User Registration/Login Page

Add Todo API

Add Todo Page

Conclusion

Routing and Route Auth in Nuxt

Automatic Routes in Nuxt

Using Route Middleware

Override Default Behaviour: Bring your own router

Finis

Structuring your Web App & Nuxt Content Module

Structure of the Modern Web App

Meet My Solutions

My New Favourite - Nuxt

Why Content Module is awesome?

Getting Started

Finis

1. Using `glob`