vuluu2k/vue-options

Vue Options API

Use this skill for Vue projects written in Options API style. For new Vue 3 projects, prefer the vue skill (Composition API with <script setup>).

Core

| Topic | Description | Reference | |-------|-------------|-----------| | State: data, computed, methods, watch | Reactive state, derived values, event handlers, side effects | state | | Props & Emits | Receiving data from parent, emitting events to parent | props-emits | | Lifecycle Hooks | Component creation, mounting, updating, unmounting | lifecycle |

Features

| Topic | Description | Reference | |-------|-------------|-----------| | provide / inject | Dependency injection across deep component trees | provide-inject | | Mixins | Reusable logic shared across components (use with caution) | mixins |

Quick Reference

Full SFC Template

<script>
export default {
  name: 'MyComponent',

  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },

  emits: ['update'],

  data() {
    return {
      localCount: this.count
    }
  },

  computed: {
    doubled() {
      return this.localCount * 2
    }
  },

  watch: {
    count(newVal) {
      this.localCount = newVal
    }
  },

  methods: {
    increment() {
      this.localCount++
      this.$emit('update', this.localCount)
    }
  },

  mounted() {
    console.log('Component mounted')
  }
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ localCount }} | Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Key Rules

• data must be a function (not an object) to avoid shared state across instances.
• computed properties are cached — only recompute when dependencies change.
• Use watch for side effects (API calls, logging), not for deriving state.
• Declare all emits explicitly to document the component's contract.
• Avoid mixins in new code — prefer composables (Composition API) for reuse.