البدء مع Nuxt: دليل شامل لتطوير الويب الحديث

pages/
  index.vue          → /
  about.vue          → /about
  blog/
    index.vue        → /blog
    [slug].vue       → /blog/:slug

<!-- لا حاجة للاستيراد! -->
<script setup>
const count = ref(0)  // ref مستورد تلقائياً
const route = useRoute()  // useRoute مستورد تلقائياً
</script>

node --version

npx nuxi@latest init my-app

cd my-app
npm install
npm run dev

my-app/
├── .nuxt/              # الملفات المولدة (لا تحرر)
├── node_modules/       # التبعيات
├── pages/              # صفحات التطبيق
│   └── index.vue       # الصفحة الرئيسية (/)
├── public/             # الملفات الثابتة
├── server/             # مسارات API الخلفية
├── app.vue             # المكون الجذر
├── nuxt.config.ts      # تكوين Nuxt
└── package.json        # بيانات المشروع

<script setup>
definePageMeta({
  title: 'من نحن'
})
</script>

<template>
  <div>
    <h1>عن شركتنا</h1>
    <p>نبني منتجات رائعة...</p>
  </div>
</template>

<script setup>
const route = useRoute()
const slug = route.params.slug

// جلب منشور المدونة بناءً على slug
const { data: post } = await useFetch(`/api/posts/${slug}`)
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </article>
</template>

<template>
  <div>
    <header>
      <nav>
        <NuxtLink to="/">الرئيسية</NuxtLink>
        <NuxtLink to="/about">من نحن</NuxtLink>
        <NuxtLink to="/blog">المدونة</NuxtLink>
      </nav>
    </header>
    
    <main>
      <!-- محتوى صفحتك يأتي هنا -->
      <slot />
    </main>
    
    <footer>
      <p>&copy; 2025 تطبيقي</p>
    </footer>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'default'
})
</script>

<script setup>
defineProps<{
  label: string
  variant?: 'primary' | 'secondary'
}>()
</script>

<template>
  <button :class="variant">
    {{ label }}
  </button>
</template>

<style scoped>
.primary {
  background: #f97216;
  color: white;
}
.secondary {
  background: #6b7280;
  color: white;
}
</style>

<template>
  <Button label="اضغطني" variant="primary" />
</template>

<script setup>
// يجلب تلقائياً على الخادم والعميل
const { data: users, pending, error } = await useFetch('https://api.example.com/users')
</script>

<template>
  <div>
    <p v-if="pending">جاري التحميل...</p>
    <p v-else-if="error">خطأ: {{ error.message }}</p>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: products } = await useAsyncData('products', async () => {
  // منطق جلب مخصص
  const response = await $fetch('/api/products', {
    params: { category: 'electronics' }
  })
  return response.data
})
</script>

<script setup>
// لا يحجب رسم الصفحة
const { data, pending } = useLazyFetch('/api/heavy-data')
</script>

export default defineEventHandler(() => {
  return {
    message: 'مرحباً من الخادم!',
    timestamp: new Date().toISOString()
  }
})

<script setup>
const { data } = await useFetch('/api/hello')
</script>

<template>
  <p>{{ data.message }}</p>
</template>

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  
  // جلب المستخدم من قاعدة البيانات
  return {
    id,
    name: 'John Doe',
    email: 'john@example.com'
  }
})

export const useCounter = (initialValue = 0) => {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return {
    count: readonly(count),
    increment,
    decrement,
    reset
  }
}

<script setup>
const { count, increment, decrement } = useCounter(10)
</script>

<template>
  <div>
    <p>العدد: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

npm install @nuxtjs/tailwindcss

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

npm install @nuxt/content

<script setup>
const { data: article } = await useAsyncData('article', () => 
  queryContent('/blog/my-post').findOne()
)
</script>

<template>
  <ContentDoc :value="article" />
</template>

npm install @nuxt/image

<template>
  <NuxtImg src="/photo.jpg" width="400" height="300" />
</template>

npm run dev

npm run build

npm run preview

npm run generate

npm run build
# نشر مع Vercel CLI أو ربط مستودع git

npm run generate  # للثابت
# أو
npm run build     # للـ SSR

npm run build
node .output/server/index.mjs

// nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    strict: true,
    typeCheck: true
  }
})

<script setup>
const props = defineProps<{
  error: {
    statusCode: number
    message: string
  }
}>()

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="handleError">العودة للرئيسية</button>
  </div>
</template>

<script setup>
useSeoMeta({
  title: 'صفحتي الرائعة',
  description: 'هذه الصفحة رائعة',
  ogImage: 'https://example.com/image.jpg',
  twitterCard: 'summary_large_image'
})
</script>

// composables/useAuth.ts
export const useAuth = () => {
  const user = useState('user', () => null)
  
  const login = async (credentials) => {
    const data = await $fetch('/api/auth/login', {
      method: 'POST',
      body: credentials
    })
    user.value = data.user
  }
  
  const logout = () => {
    user.value = null
  }
  
  return { user, login, logout }
}

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { user } = useAuth()
  
  if (!user.value) {
    return navigateTo('/login')
  }
})

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

npm run dev -- --port 3001

rm -rf .nuxt
npm run dev

npm run postinstall  # إعادة توليد الأنواع