Nugsoft Developer Guides

Coding Standard in Vue 3

Adhering to a consistent coding standard improves maintainability and collaboration. Vue 3 projects should follow the official Vue style guide and modern JavaScript/TypeScript best practices.

General Principles

  • Use the Vue 3 Style Guide for all code.
  • Prefer the Composition API and <script setup> syntax for new components.
  • Use TypeScript for type safety and better tooling.
  • Organize code into small, reusable components and composables.
  • Avoid logic in templates; keep business logic in script or composables.

Naming Conventions

  • Use PascalCase for component names (e.g., MyComponent.vue).
  • Use camelCase for props, events, and variables.
  • Prefix composables with use (e.g., useFetch, useAuth).
  • Use kebab-case for file names and custom directives.

File Structure

  • Place components in src/components/.
  • Place composables in src/composables/.
  • Use src/views/ for page-level components.

Example: Composition API Component

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

Linting & Formatting

  • Use ESLint with the Vue plugin and Prettier for formatting.
  • Enforce linting and formatting in CI pipelines.

References

Back to Top