Functional Blocks

Related code MUST be grouped into functional blocks by feature or functionality.

Each functional block MUST be preceded by a comment describing the block.

Block comments MUST use the format // === Block Name ===.

A functional block contains all related state, computed properties, and methods for a single feature.

Standard block names:

Imports
Props
Emits
Lifecycle

Feature block names examples:

Cart
Price Display
User Authentication
Form Validation

Example:

// === Imports ===
import { ref, computed } from 'vue'

// === Props ===
const props = defineProps<Props>()

// === Cart ===
const quantity = ref(1)
const isAddingToCart = ref(false)

const canAddToCart = computed(() => {
    return quantity.value > 0
})

async function handleAddToCart() {
    // ...
}

// === Price Display ===
const formattedPrice = computed(() => formatPrice(props.product.price))

// === Lifecycle ===
onMounted(() => {
    // ...
})

See: https://vuejs.org/guide/extras/composition-api-faq.html#more-flexible-code-organization