📋 محتويات الصفحة
📖 الوصف
Nuxt هو إطار عمل Vue.js شامل لبناء تطبيقات الويب الحديثة. يُقدم Server-Side Rendering (SSR)، Static Site Generation (SSG)، وHybrid Rendering. يوفر نظام توجيه قائم على الملفات، واستخراج تلقائي للمسارات (auto-imports)، وأدوات تطوير قوية. Nuxt 3 مبني على Vue 3 و Vite و Nitro (server engine) ويُقدم أدا...
🎯 يستخدم في
مجالات استخدام هذه الأداة
تطبيقات Vue كاملة مع SSR/SSG
مواقع التجارة الإلكترونية
المدونات ومواقع المحتوى
تطبيقات Progressive Web Apps
مواقع متعددة اللغات (i18n)
✨ المميزات
أبرز مميزات هذه الأداة
Server-Side Rendering (SSR)
Static Site Generation (SSG)
Auto-imports (components
composables)
ملف نظام التوجيه
TypeScript مدمج بالكامل
Nitro server engine سريع
Nuxt modules ecosystem
DevTools قوية (Nuxt DevTools)
⚠️ العيوب
نقاط يجب مراعاتها
تعقيد في التكوين للمشاريع الكبيرة
حجم الحزمة قد يكون كبيراً مع modules كثيرة
منحنى تعليمي أعلى من Vue الأساسي
بعض الميزات تحتاج Nuxt modules محددة
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!-- pages/index.vue -->
<template>
<div>
<h1>آخر المقالات</h1>
<div v-for="post in posts" :key="post.id">
<NuxtLink :to="`/posts/${post.id}`">
<h2>{{ post.title }}</h2>
</NuxtLink>
<p>{{ post.excerpt }}</p>
</div>
</div>
</template>
<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () =>
$fetch('/api/posts')
);
</script>
<!-- pages/posts/[id].vue -->
<template>
<article>
<h1>{{ post.title }}</h1>
<div v-html="post.content"></div>
</article>
</template>
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useAsyncData(`post-${route.params.id}`, () =>
$fetch(`/api/posts/${route.params.id}`)
);
</script>
<!-- server/api/posts/index.ts -->
import { prisma } from '~/lib/prisma';
export default defineEventHandler(async () => {
return await prisma.post.findMany();
});📚 أدوات أخرى في Meta-Frameworks
قد يعجبك أيضاً
Analog
إطار عمل Angular كامل (Full-Stack Angular Framework)
Astro
⭐إطار عمل للمحتوى (Content-Focused Framework)
Gatsby
⭐إطار عمل ثابت مع بيانات GraphQL (Static Site Generator with GraphQL)
Next.js
⭐إطار عمل React شامل (React Meta-Framework)
Qwik City
إطار عمل Qwik شامل (Qwik Meta-Framework)
RedwoodJS
إطار عمل Jamstack كامل (Full-Stack Jamstack Framework)