Astro Integrations: เพิ่ม React, Vue, Tailwind และอื่นๆ

Astro Integrations คืออะไร

Integrations ช่วยให้เพิ่ม framework, library หรือ tool เข้าไปใน Astro project ได้ง่ายๆ

เพิ่ม React

npx astro add react

---
import ReactButton from '../components/Button.tsx';
---

<ReactButton client:load label="คลิกฉัน" />

เพิ่ม Tailwind CSS

npx astro add tailwind

---
---

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <h1 class="text-2xl font-bold">สวัสดี Tailwind!</h1>
</div>

เพิ่ม MDX

npx astro add mdx

---
title: บทความ MDX
---

import Counter from '../components/Counter.tsx';

# บทความที่มี Component

นี่คือ Markdown ปกติ

<Counter client:load />

กลับมาเป็น Markdown

เพิ่ม Sitemap

npx astro add sitemap

// astro.config.mjs
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://mysite.com',
  integrations: [sitemap()]
});

เพิ่ม Image Optimization

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Hero image"
  width={800}
  height={400}
  format="webp"
/>

สร้าง Custom Integration

// my-integration.ts
import type { AstroIntegration } from 'astro';

export function myIntegration(): AstroIntegration {
  return {
    name: 'my-integration',
    hooks: {
      'astro:build:done': ({ dir }) => {
        console.log('Build เสร็จแล้ว!', dir);
      }
    }
  };
}

Popular Integrations

npx astro add vue        # Vue.js
npx astro add svelte     # Svelte
npx astro add solid      # SolidJS
npx astro add partytown  # Third-party scripts
npx astro add alpinejs   # Alpine.js

สรุป

Astro integrations ทำให้เพิ่ม framework หรือ tool ได้ง่ายมากด้วยคำสั่งเดียว และสามารถใช้หลาย framework ในโปรเจ็คเดียวกันได้ครับ