58 lines
23 KiB
Markdown
58 lines
23 KiB
Markdown
---
|
|
trigger: glob
|
|
glob: src/*.vue
|
|
---
|
|
|
|
|
|
| No | Category | Guideline | Description | Do | Don't | Code Good | Code Bad | Severity | Docs URL |
|
|
| --- | ------------- | ------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------- |
|
|
| 1 | Composition | Use Composition API for new projects | Composition API offers better TypeScript support and logic reuse | `<script setup>` for components | Options API for new projects | `<script setup>` | `export default { data() }` | Medium | [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html) |
|
|
| 2 | Composition | Use script setup syntax | Cleaner syntax with automatic exports | `<script setup>` with `defineProps` | `setup()` function manually | `<script setup>` | `<script> setup() { return {} }` | Low | [SFC Script Setup](https://vuejs.org/api/sfc-script-setup.html) |
|
|
| 3 | Reactivity | Use ref for primitives | ref() for primitive values that need reactivity | `ref()` for strings numbers booleans | `reactive()` for primitives | `const count = ref(0)` | `const count = reactive(0)` | Medium | [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) |
|
|
| 4 | Reactivity | Use reactive for objects | reactive() for complex objects and arrays | `reactive()` for objects with multiple properties | `ref()` for complex objects | `const state = reactive({ user: null })` | `const state = ref({ user: null })` | Medium | - |
|
|
| 5 | Reactivity | Access ref values with .value | Remember .value in script unwrap in template | Use `.value` in script | Forget .value in script | `count.value++` | `count++ (in script)` | High | - |
|
|
| 6 | Reactivity | Use computed for derived state | Computed properties cache and update automatically | `computed()` for derived values | Methods for derived values | `const doubled = computed(() => count.value * 2)` | `const doubled = () => count.value * 2` | Medium | [Computed Properties](https://vuejs.org/guide/essentials/computed.html) |
|
|
| 7 | Reactivity | Use shallowRef for large objects | Avoid deep reactivity for performance | `shallowRef` for large data structures | `ref` for large nested objects | `const bigData = shallowRef(largeObject)` | `const bigData = ref(largeObject)` | Medium | [shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref) |
|
|
| 8 | Watchers | Use watchEffect for simple cases | Auto-tracks dependencies | `watchEffect` for simple reactive effects | `watch` with explicit deps when not needed | `watchEffect(() => console.log(count.value))` | `watch(count, (val) => console.log(val))` | Low | [Watchers](https://vuejs.org/guide/essentials/watchers.html) |
|
|
| 9 | Watchers | Use watch for specific sources | Explicit control over what to watch | `watch` with specific refs | `watchEffect` for complex conditional logic | `watch(userId, fetchUser)` | `watchEffect with conditionals` | Medium | - |
|
|
| 10 | Watchers | Clean up side effects | Return cleanup function in watchers | Return cleanup in `watchEffect` | Leave subscriptions open | `watchEffect((onCleanup) => { onCleanup(unsub) })` | `watchEffect without cleanup` | High | - |
|
|
| 11 | Props | Define props with defineProps | Type-safe prop definitions | `defineProps` with TypeScript | Props without types | `defineProps<{ msg: string }>()` | `defineProps(['msg'])` | Medium | [Typing Component Props](https://vuejs.org/guide/typescript/composition-api.html#typing-component-props) |
|
|
| 12 | Props | Use withDefaults for default values | Provide defaults for optional props | `withDefaults` with `defineProps` | Defaults in destructuring | `withDefaults(defineProps<Props>(), { count: 0 })` | `const { count = 0 } = defineProps()` | Medium | - |
|
|
| 13 | Props | Avoid mutating props | Props should be read-only | Emit events to parent for changes | Direct prop mutation | `emit('update:modelValue', newVal)` | `props.modelValue = newVal` | High | - |
|
|
| 14 | Emits | Define emits with defineEmits | Type-safe event emissions | `defineEmits` with types | Emit without definition | `defineEmits<{ change: [id: number] }>()` | `emit('change', id) without define` | Medium | [Typing Component Emits](https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits) |
|
|
| 15 | Emits | Use v-model for two-way binding | Simplified parent-child data flow | v-model with modelValue prop | :value + @input manually | `<Child v-model="value"/>` | `<Child :value="value" @input="value = $event"/>` | Low | [v-model](https://vuejs.org/guide/components/v-model.html) |
|
|
| 16 | Lifecycle | Use onMounted for DOM access | DOM is ready in onMounted | onMounted for DOM operations | Access DOM in setup directly | `onMounted(() => el.value.focus())` | `el.value.focus() in setup` | High | [Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html) |
|
|
| 17 | Lifecycle | Clean up in onUnmounted | Remove listeners and subscriptions | onUnmounted for cleanup | Leave listeners attached | `onUnmounted(() => window.removeEventListener())` | No cleanup on unmount | High | - |
|
|
| 18 | Lifecycle | Avoid onBeforeMount for data | Use onMounted or setup for data fetching | Fetch in onMounted or setup | Fetch in onBeforeMount | `onMounted(async () => await fetchData())` | `onBeforeMount(async () => await fetchData())` | Low | - |
|
|
| 19 | Components | Use single-file components | Keep template script style together | .vue files for components | Separate template/script files | Component.vue with all parts | Component.js + Component.html | Low | - |
|
|
| 20 | Components | Use PascalCase for components | Consistent component naming | PascalCase in imports and templates | kebab-case in script | `<MyComponent/>` | `<my-component/>` | Low | [Component Naming](https://vuejs.org/style-guide/rules-strongly-recommended.html) |
|
|
| 21 | Components | Prefer composition over mixins | Composables replace mixins | Composables for shared logic | Mixins for code reuse | `const { data } = useApi()` | `mixins: [apiMixin]` | Medium | - |
|
|
| 22 | Composables | Name composables with use prefix | Convention for composable functions | useFetch useAuth useForm | getData or fetchApi | `export function useFetch()` | `export function fetchData()` | Medium | [Composables](https://vuejs.org/guide/reusability/composables.html) |
|
|
| 23 | Composables | Return refs from composables | Maintain reactivity when destructuring | Return ref values | Return reactive objects that lose reactivity | `return { data: ref(null) }` | `return reactive({ data: null })` | Medium | - |
|
|
| 24 | Composables | Accept ref or value params | Use toValue for flexible inputs | toValue() or unref() for params | Only accept ref or only value | `const val = toValue(maybeRef)` | `const val = maybeRef.value` | Low | [toValue](https://vuejs.org/api/reactivity-utilities.html#tovalue) |
|
|
| 25 | Templates | Use v-bind shorthand | Cleaner template syntax | :prop instead of v-bind:prop | Full v-bind syntax | `<div :class="cls">` | `<div v-bind:class="cls">` | Low | - |
|
|
| 26 | Templates | Use v-on shorthand | Cleaner event binding | @event instead of v-on:event | Full v-on syntax | `<button @click="handler">` | `<button v-on:click="handler">` | Low | - |
|
|
| 27 | Templates | Avoid v-if with v-for | v-if has higher priority causes issues | Wrap in template or computed filter | v-if on same element as v-for | `<template v-for><div v-if>` | `<div v-for v-if>` | High | [Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for) |
|
|
| 28 | Templates | Use key with v-for | Proper list rendering and updates | Unique key for each item | Index as key for dynamic lists | `v-for="item in items" :key="item.id"` | `v-for="(item, i) in items" :key="i"` | High | - |
|
|
| 29 | State | Use Pinia for global state | Official state management for Vue 3 | Pinia stores for shared state | Vuex for new projects | `const store = useCounterStore()` | Vuex with mutations | Medium | [Pinia](https://pinia.vuejs.org/) |
|
|
| 30 | State | Define stores with defineStore | Composition API style stores | Setup stores with defineStore | Options stores for complex state | `defineStore('counter', () => {})` | `defineStore('counter', { state })` | Low | - |
|
|
| 31 | State | Use storeToRefs for destructuring | Maintain reactivity when destructuring | storeToRefs(store) | Direct destructuring | `const { count } = storeToRefs(store)` | `const { count } = store` | High | [Destructuring from a Store](https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store) |
|
|
| 32 | Routing | Use useRouter and useRoute | Composition API router access | useRouter() useRoute() in setup | this.$router this.$route | `const router = useRouter()` | `this.$router.push()` | Medium | [Composition API Router](https://router.vuejs.org/guide/advanced/composition-api.html) |
|
|
| 33 | Routing | Lazy load route components | Code splitting for routes | () => import() for components | Static imports for all routes | `component: () => import('./Page.vue')` | `component: Page` | Medium | [Lazy Loading](https://router.vuejs.org/guide/advanced/lazy-loading.html) |
|
|
| 34 | Routing | Use navigation guards | Protect routes and handle redirects | beforeEach for auth checks | Check auth in each component | `router.beforeEach((to) => {})` | Check auth in onMounted | Medium | - |
|
|
| 35 | Performance | Use v-once for static content | Skip re-renders for static elements | v-once on never-changing content | v-once on dynamic content | `<div v-once>{{ staticText }}</div>` | `<div v-once>{{ dynamicText }}</div>` | Low | [v-once](https://vuejs.org/api/built-in-directives.html#v-once) |
|
|
| 36 | Performance | Use v-memo for expensive lists | Memoize list items | v-memo with dependency array | Re-render entire list always | `<div v-for v-memo="[item.id]">` | `<div v-for>` without memo | Medium | [v-memo](https://vuejs.org/api/built-in-directives.html#v-memo) |
|
|
| 37 | Performance | Use shallowReactive for flat objects | Avoid deep reactivity overhead | shallowReactive for flat state | reactive for simple objects | `shallowReactive({ count: 0 })` | `reactive({ count: 0 })` | Low | - |
|
|
| 38 | Performance | Use defineAsyncComponent | Lazy load heavy components | defineAsyncComponent for modals dialogs | Import all components eagerly | `defineAsyncComponent(() => import())` | `import HeavyComponent from` | Medium | [defineAsyncComponent](https://vuejs.org/guide/components/async.html) |
|
|
| 39 | TypeScript | Use generic components | Type-safe reusable components | Generic with defineComponent | Any types in components | `<script setup lang="ts" generic="T">` | `<script setup>` without types | Medium | [TypeScript Composition API](https://vuejs.org/guide/typescript/composition-api.html) |
|
|
| 40 | TypeScript | Type template refs | Proper typing for DOM refs | ref<HTMLInputElement>(null) | ref(null) without type | `const input = ref<HTMLInputElement>(null)` | `const input = ref(null)` | Medium | - |
|
|
| 41 | TypeScript | Use PropType for complex props | Type complex prop types | PropType<User> for object props | Object without type | `type: Object as PropType<User>` | `type: Object` | Medium | - |
|
|
| 42 | Testing | Use Vue Test Utils | Official testing library | mount shallowMount for components | Manual DOM testing | `import { mount } from '@vue/test-utils'` | `document.createElement` | Medium | [Vue Test Utils](https://test-utils.vuejs.org/) |
|
|
| 43 | Testing | Test component behavior | Focus on inputs and outputs | Test props emit and rendered output | Test internal implementation | `expect(wrapper.text()).toContain()` | `expect(wrapper.vm.internalState)` | Medium | - |
|
|
| 44 | Forms | Use v-model modifiers | Built-in input handling | .lazy .number .trim modifiers | Manual input parsing | `<input v-model.number="age">` | `<input v-model="age"> then parse` | Low | [v-model Modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) |
|
|
| 45 | Forms | Use VeeValidate or FormKit | Form validation libraries | VeeValidate for complex forms | Manual validation logic | `useField useForm from vee-validate` | Custom validation in each input | Medium | - |
|
|
| 46 | Accessibility | Use semantic elements | Proper HTML elements in templates | button nav main for purpose | div for everything | `<button @click>` | `<div @click>` | High | - |
|
|
| 47 | Accessibility | Bind aria attributes dynamically | Keep ARIA in sync with state | ":aria-expanded="isOpen"" | Static ARIA values | ":aria-expanded="menuOpen"" | `aria-expanded="true""` | Medium | - |
|
|
| 48 | SSR | Use Nuxt for SSR | Full-featured SSR framework | Nuxt 3 for SSR apps | Manual SSR setup | `npx nuxi init my-app` | Custom SSR configuration | Medium | [Nuxt](https://nuxt.com/) |
|
|
| 49 | SSR | Handle hydration mismatches | Client/server content must match | ClientOnly for browser-only content | Different content server/client | `<ClientOnly><BrowserWidget/></ClientOnly>` | `<div>{{ Date.now() }}</div>` | High | - |
|