Coder Legion - Recent posts tagged vue3

How I built a Social Recipe Extractor that turns short-form video links into structured recipes

Wed, 13 May 2026 15:44:38 +0000

I recently built a feature for https://recipe-finder.org that takes a TikTok, Instagram, or YouTube cooking link and turns it into a structured recipe.

The goal was simple: recipe inspiration lives on social platforms, but the actual cooking steps are usually buried inside captions, spoken instructions, or fast cuts. I wanted a workflow where a user pastes a link and gets back something usable: a recipe title, ingredient list, instructions, and a cleaner format for the rest of the product.

The Flow

The core user journey is straightforward:

The user pastes a supported social video URL.
The frontend sends that URL to a protected backend endpoint.
The backend normalizes the link, fetches available source metadata and text, and runs an extraction pass.
The result is converted into a structured recipe object.
The app returns a clean recipe view, keeps recent imports in history, and can reuse cached results for repeated links.

What makes this interesting isn't just the form input—it's the cleanup step between raw social content and something a user can actually cook from.

Here is a look under the hood at how it's built using Vue 3, TypeScript, and Node.js/Express.

1. Frontend Entry Point

The feature lives behind authentication and opens as a dedicated page in the app. The page itself stays simple and hands the main workflow to a dedicated Social Recipe Extractor component.

To keep the UI predictable and sleek (opting for a dark mode aesthetic with vibrant orange accents for active states), the component manages four main states:

The pasted social link
Loading and error feedback
The extracted recipe result
Recent import history and usage state

This keeps the input on the left, the result on the right, and prior imports available without mixing feature logic across multiple pages.

2. Backend-Owned Extraction Flow

The frontend does not parse social content directly. Instead, it sends the link to a backend route dedicated to social recipe extraction.

That backend layer is responsible for:

Validating the request
Normalizing the URL into a canonical form
Checking whether a usable cached import already exists
Fetching source metadata and extracted text from the target platform
Transforming unstructured content into a recipe-shaped response
Returning a stable payload the frontend can render safely

This is the right ownership boundary because platform parsing, rate control, caching, and extraction quality all belong on the server. The frontend only ever deals with a typed response.

3. Structured Extraction

The most important design choice was ensuring the pipeline doesn't stop at "grab some text from the page." It pushes the output into a highly structured shape:

Recipe title
Prep time
Ingredients
Instructions
Normalized ingredients
Source metadata (platform, thumbnail, title, author)

This matters because a structured result is much easier to reuse than a raw text dump. It allows the data to power future features without rebuilding the extraction logic each time.

4. Normalization and Cleanup

Social content is inherently messy. Titles contain hashtags, descriptions are noisy, and ingredient mentions are often incomplete or informal.

The implementation handles this by cleaning and normalizing content before and after extraction:

URL normalization ensures equivalent links map to the same import record.
Title cleanup prevents social-platform suffixes and noisy text from leaking into the recipe title.
Whitespace and escaped-text cleanup is applied before extraction.
Ingredient normalization makes the output more consistent for downstream product use.

This cleanup layer is where a lot of the actual product quality is realized.

5. Caching and History

Two product decisions make the feature feel significantly faster and more useful:

Cached imports prevent unnecessary repeat processing for the same normalized link.
Import history gives users a lightweight library of recently extracted recipes.

The extractor isn't just a one-shot tool; it becomes a reusable workflow inside the product.

6. Premium-Friendly Usage Model

Finally, the feature returns usage information along with the extraction result. That allows the UI to immediately show whether the user can continue importing, how much of their current allowance is used, and when an upgrade prompt should appear.

This is a much better user experience than hard-failing late in the flow, as the interface can explain the state before the user hits a dead end.

Wrapping Up

This is one of those features where the product value comes purely from reducing friction. People already save recipes from social media. The real improvement is turning that saved link into something searchable, reusable, and easier to cook from.

If I were extending it further, the next logical step would be connecting the extracted, structured recipe directly into grocery list generation, smart meal planning, and nutrition analysis.

I spent a year chasing AI hype and buying courses. Here is why I went back to Vue.

Thu, 29 Jan 2026 23:35:34 +0000

I’ll be honest: I got lost.

For the past year, I abandoned my comfort zone. As a veteran Vue 2 developer, I felt the "Fear Of Missing Out" (FOMO) hitting me hard. Everywhere I looked, people were shouting:

"AI will replace you!" > "Learn LLMs or become obsolete!" > "Make passive income with AI-generated videos!"

I have two kids to feed. The anxiety was real.

So, I did what many terrified developers did. I stopped writing code and started chasing the wind. I bought the expensive courses on "AI App Development". I tried to become a "Content Creator" using AI tools to churn out soulless videos. I tried to force myself to love the React ecosystem just because "it has more AI libraries."

I became a "Leek" (a term we use in China for people who get harvested by hype).

After a year of burning cash and time, I looked at my portfolio. I had zero real users, a bunch of "Hello World" AI demos, and a lingering feeling of emptiness. The AI tools improved my efficiency, sure, but they didn't solve the core problem: I wasn't building anything valuable.

The Return to Reality

I had a reality check one late night. I realized that while everyone is trying to build the next ChatGPT wrapper, regular people still struggle with basic things.

I create content, and I work with images daily. I realized that simple tasks like bulk resizing, converting formats, or compressing images without uploading them to a shady server (privacy matters!) are still annoying.

Photoshop is too expensive and heavy for quick tasks.
Most online tools are ad-ridden nightmares that steal your data.

So, I made a decision. Stop chasing the hype. Start shipping utility.

From Vue 2 to Nuxt 4

I went back to my roots, but I leveled up. I skipped the legacy Vue 2 patterns I was used to and dove straight into Vue 3 (Composition API) and Nuxt.

It was refreshing. No more fighting with Python environments or prompt engineering. Just pure, clean JavaScript/TypeScript.

I built BulkPicTools.

It’s not an "AI-powered, Blockchain-backed, Metaverse-ready" platform. It’s a boring, useful tool.

⚡️ Client-side only: It runs entirely in your browser using WebAssembly and modern JS APIs.
Privacy-first: Your photos never leave your device. No server uploads.
Solves a real problem: Bulk processing for creators who value their time.

I’m writing this for any other developer who feels inadequate because they aren't an "AI Expert" yet.

You don't need to ride every wave. Your engineering skills—whether it's Vue, Rails, or PHP—are still valuable if you use them to solve real problems.

I’m still learning the ropes with the latest Nuxt features, and the journey from "Corporate Employee" to "Indie Hacker" is terrifying. But at least now, I'm building something real again.

If you have feedback on the tool or the Nuxt implementation, I’d love to hear it!

Thanks for reading.

Clean Async State Management with Pinia Colada

Sat, 05 Jul 2025 08:33:04 +0000

Managing async state—think loading spinners, error handling, stale data—is notoriously messy. If you’ve wrestled with nested subscriptions or redundant fetch logic in Vue+Pinia apps, Pinia Colada might be the game-changer you need.

What Is Pinia Colada?

Pinia Colada is a powerful data-fetching layer built on top of Pinia. It eliminates boilerplate by providing:

Automatic caching and deduplication
Smart query invalidation
Declarative API for queries (data fetches) and mutations
Support for optimistic updates, SSR, and tree-shaken size of \~2 KB

Quick Start

npm install pinia @pinia/colada

Then in your Vue app setup:

import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'

app.use(createPinia())
app.use(PiniaColada, {/* optional plugins */})

Now you’re ready to use useQuery and useMutation everywhere.

Example: Querying Data

Instead of manual loading flags, error state, and fetch logic:

const { data, error, isPending, isLoading, refresh } = useQuery({
  key: ['users'],
  query: fetchUsers,
})

Then in the template, you can declaratively handle the three states:

isPending — first fetch
isLoading — refreshes
error — if broken
data — once resolved

Mutations & Invalidation

const { mutate: addComment, isLoading } = useMutation({
  mutation: postComment,
  onSettled: async ({ id }) => {
    await queryCache.invalidateQueries({ key: ['comments', id], exact: true })
  }
})

This lets you optimistically update and ensure fresh data before closing modal dialogs or user notifications.

Why You’ll Love It

Minimal state boilerplate: No more juggling isLoading, isError, and data manually.
Built-in caching and deduplication for better UX and efficiency.
Fully typed, tree-shakeable, zero deps (besides Pinia), and SSR-ready.
Plugins like autoRefetch and delay help avoid flickers or stale data.

Real-World Feedback

Reddit users highlight Pinia Colada's advantage for API-driven state:

“This is what Pinia stores call service methods… API calls inside sweet local store. It’s perfect to avoid multiple fetches.”

Others note:

“Pinia is for global app state. For API caching use Tanstack Query… Pinia Colada consolidates the conundrum.”

TL;DR – When to Use It

Use Pinia Colada when:

You want clean, reusable logic for API calls
You care about efficient caching and UX consistency
You prefer declarative state over imperative patterns
You work with mutable server data and want stale-data control

Want to Go Further?

Explore optimistic updates, SSR support, and GraphQL usage
Combine with Vue Router Data Loaders and modular async handling
Try plugins like auto-refetch and delay to polish UX

Pinia Colada brings a modern, well-structured approach to async state in Vue apps—cutting boilerplate, reducing bugs, and improving developer happiness. Whether it's simple CRUD or complex dialogs or pagination, it's well worth a look.

Velora Vue.js Admin Template (Free)

Mon, 30 Jun 2025 10:29:56 +0000

Velora Vue.js Admin Template (Free Version) is a clean, responsive, and modern admin dashboard built using Vue 3, Vuetify 3, and Vite. Designed for developers who want a flexible and ready-to-use admin UI, Velora helps speed up dashboard and SaaS app development.

Features

Vue 3 with Composition API
✨ Vuetify 3 design system
⚡ Vite for blazing-fast dev server
Light/Dark Mode
Pre-built pages: Dashboard, Login, Error, etc.
Fully customizable and extendable

Ideal for:

Developers building admin panels
Dashboard interfaces
Internal tools and SaaS backends

Why it's free?

We created this version to help indie developers, hobbyists, and startups get started with Vue and Vuetify faster. For more features and advanced pages, you can explore our premium version.

Live Demo:
https://demos.icreatorstudio.com/velora-vuejs-vuetify-admin-template-free

Support & Premium Version:
https://icreatorstudio.com/product/velora-vuejs-admin-template

Built by iCreator Studio ✨