How I Built a 90+ Tools Developer Platform with Vue 3 + SSG

I recently built a developer tools collection website. Ran into a lot of issues along the way, but also learned a ton. Here's my experience with the tech stack and implementation.
Background
I got tired of needing various online tools while coding - JSON formatter, Base64 converter, hash generator, etc. Had them all bookmarked in different places, couldn't find what I needed quickly.
So I decided to build my own. One place with everything I need.
Tech Stack
Frontend: Vue 3 + TypeScript
Why Vue 3:

• Composition API feels natural
• Great TypeScript support
• Mature ecosystem with good component libraries // Tool definition example export const tool = defineTool({ name: 'Hash Text', path: '/hash-text', description: 'Generate MD5, SHA256 hashes', keywords: ['hash', 'md5', 'sha256'], component: () => import('./hash-text.vue'), });

Build Tool: Vite
Vite's dev experience is really good:

• Fast hot reload
• Simple config
• Quick builds Deployment: Cloudflare Pages Why Cloudflare Pages:
• Free tier is enough
• Global CDN acceleration
• Automatic HTTPS
• Easy deployment Issues I Encountered
• SPA SEO Problem This was the biggest issue. Vue SPA returns the same HTML for all pages. Search engine crawlers see empty shells. Solution: SSG pre-rendering I wrote an SSG script that generates independent HTML for each tool page: function generateHtml(page) { let html = indexHtml;

// Replace Title
html = html.replace(/

[^<]*<\/title>/, ${page.title});

// Replace Meta Description
html = html.replace(/<meta name="description" content="[^"]*"/,
);

// Replace Canonical URL
html = html.replace(/<link rel="canonical" href="[^"]*"/,
https://agentsaitools.com${page.path}/");

return html;
}

1. Canonical URL Issue At first, all pages had canonical pointing to homepage, causing sub-pages to not be indexed. Solution: Ensure each page's canonical points to its own URL.
2. Internal Link Issue Ahrefs audit found many pages had no internal links (orphan pages). Solution: Add related tools recommendation and complete tool list on each page. Architecture src/ ├── tools/ # Tool definitions │ ├── hash-text/ │ │ ├── index.ts │ │ └── hash-text.vue │ └── ... ├── pages/ # Page components ├── layouts/ # Layout components └── components/ # Shared components

scripts/
└── ssg.mjs # SSG pre-render script

SEO Optimization

1. Structured Data
   Each tool page has its own JSON-LD:
   {
   "@context": "https://schema.org",
   "@type": "WebPage",
   "name": "Hash Generator",
   "description": "Generate MD5, SHA256 hashes online",
   "url": "https://agentsaitools.com/hash-text/"
   }

2. Breadcrumb Navigation
   {
   "@type": "BreadcrumbList",
   "itemListElement": [
   {"position": 1, "name": "Home"},
   {"position": 2, "name": "Crypto"},
   {"position": 3, "name": "Hash Generator"}
   ]
   }

3. Meta Tags
   Each page has independent:

4. Title

5. Description

6. Canonical URL

7. OG tags

8. Twitter tags
   Performance Optimization

9. Code splitting - Lazy loading by route

10. CDN acceleration - Cloudflare global nodes

11. Asset compression - Terser for JS

12. Caching strategy - Long-term cache for static assets
    Cost
    Item
    Cost
    Domain
    $12/year
    Hosting
    Free
    CDN
    Free
    SSL
    Free
    Total
    $12/year
    Summary
    Learned a lot from this project:

13. SPA SEO issues need SSG solution

14. Structured data is important for SEO

15. Internal link structure affects indexing

16. Performance optimization is ongoing
    If you're working on a similar project, I hope these experiences help.
    Source code: https://github.com/ruoyexipan/it-tools