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>
  <!-- ...existing code... -->
</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>
  <!-- ...existing code... -->
</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>
  <!-- ...existing code... -->
</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.