Wrikka Learn

Dark mode

Nuxt Naming Conventions ​

คู่มือการตั้งชื่อใน Nuxt.js ที่ช่วยให้โค้ดเป็นระเบียบและอ่านง่าย

Directory Structure ​

Pages Directory ​

  • File-based Routing: ใช้ kebab-case สำหรับชื่อไฟล์

    • pages/user/profile.vue → /user/profile
    • pages/blog/[slug].vue → /blog/:slug

  • Dynamic Routes: ใช้ [param] สำหรับ dynamic parameters

    bash
    pages/
  users/[id].vue
  posts/[slug].vue

Components Directory ​

  • PascalCase สำหรับชื่อ component files

    bash
    components/
  BaseButton.vue
  UserProfileCard.vue

  • Auto-import: ใช้ชื่อไฟล์เป็นชื่อ component โดยอัตโนมัติ

Component Naming ​

Single-file Components ​

  • PascalCase สำหรับชื่อ component
    vue
    <script setup>
// UserProfile.vue
</script>

Component Tags ​

  • PascalCase เมื่อใช้ใน template
    vue
    <template>
  <UserProfile />
  <BaseButton>Click me</BaseButton>
</template>

Props Naming ​

  • camelCase เมื่อประกาศ props

    vue
    <script setup>
const props = defineProps({
  userData: Object,
  isActive: Boolean,
  buttonText: String,
});
</script>

  • kebab-case เมื่อใช้งานใน template

    vue
    <template>
  <UserProfile
    :user-data="user"
    :is-active="true"
    button-text="Submit"
  />
</template>

State Management (Pinia) ​

Store Naming ​

  • camelCase สำหรับชื่อไฟล์ store
    bash
    stores/
  userStore.ts
  cartStore.ts

Store Usage ​

  • ใช้ use prefix สำหรับ store composables
    typescript
    // stores/user.ts
export const useUserStore = defineStore("user", {
  state: () => ({
    name: "",
    email: "",
  }),
});

Composable Functions ​

  • ใช้ use prefix สำหรับ composables
    typescript
    // composables/useAuth.ts
export function useAuth() {
  // auth logic
}

Utility Functions ​

  • camelCase สำหรับ utility functions
    typescript
    // utils/stringHelpers.ts
export function formatDate(date: Date): string {
  // formatting logic
}

TypeScript Types ​

  • PascalCase สำหรับ type/interface
    typescript
    // types/user.ts
interface User {
  id: number;
  name: string;
  email: string;
}

Best Practices ​

  1. ใช้ kebab-case สำหรับชื่อไฟล์ใน pages/ directory
  2. ใช้ PascalCase สำหรับ component files
  3. ใช้ camelCase สำหรับ composables และ utilities
  4. ตั้งชื่อไฟล์ให้สื่อความหมายและบ่งบอกถึงหน้าที่
  5. ใช้ TypeScript อย่างสม่ำเสมอ

Example Structure ​

bash
├── components/
│   ├── base/
│   │   ├── BaseButton.vue
│   │   └── BaseInput.vue
│   └── shared/
│       └── UserCard.vue
├── pages/
│   ├── index.vue
│   ├── users/
│   │   ├── [id].vue
│   │   └── index.vue
│   └── settings.vue
├── stores/
│   ├── userStore.ts
│   └── cartStore.ts
└── utils/
    └── formatters.ts

การตั้งชื่อที่เหมาะสมจะช่วยให้โค้ดอ่านง่ายและบำรุงรักษาได้ดีขึ้น