Christophevg C3 Vue

Vue.js Component Patterns

Guide for Vue.js patterns in Baseweb projects.

When to Use This Skill

Use this skill when:

• Creating Vue components
• Managing shared state between components
• Fixing reactivity issues
• Implementing component lifecycle hooks

Store Pattern for Global State

When multiple components need to share state (e.g., authentication, user session), use a centralized store instead of $root or prop drilling.

Why Use a Store

Store Module Structure

// Register a store module for authentication
store.registerModule("auth", {
  state: {
    checking: true,
    session: null
  },
  getters: {
    checking: function(state) { return state.checking; },
    session: function(state) { return state.session; }
  },
  actions: {
    setup_session: function(context) {
      context.commit("checking", true);
      $.ajax({
        type: "GET",
        url: "/auth/me",
        success: function(res) {
          context.commit("session", res);
          context.commit("checking", false);
        },
        error: function() {
          context.commit("checking", false);
        },
        dataType: "json"
      });
    },
    logout: function(context) {
      $.ajax({
        type: "POST",
        url: "/auth/logout",
        success: function() {
          context.commit("session", null);
        }
      });
    }
  },
  mutations: {
    session: function(state, new_session) {
      state.session = new_session;
    },
    checking: function(state, new_state) {
      state.checking = new_state;
    }
  }
});

// Initialize on document ready
$(document).ready(function() {
  store.dispatch("setup_session");
});

Component Usage

AuthDialog component - Shows login dialog when not authenticated:

app.component('AuthDialog', {
  computed: {
    showDialog() { return !store.getters.checking && !store.getters.session; },
    checkingSession() { return store.getters.checking; }
  },
  // ... rest of component
});

Chat component - Shows chat interface when authenticated:

var Chat = {
  computed: {
    authenticated() { return store.getters.session != null; },
    currentUser() {
      return this.authenticated ? store.getters.session.user : null;
    }
  },
  methods: {
    handleLogout() {
      store.dispatch("logout");
    }
  }
  // ... rest of component
};

Template Usage

<template>
  <Page>
    <!-- Show auth dialog when not authenticated -->
    <AuthDialog v-if="!authenticated" />

    <!-- Show main content when authenticated -->
    <v-layout v-if="authenticated">
      <!-- Main content -->
    </v-layout>
  </Page>
</template>

<script>
export default {
  computed: {
    authenticated() { return store.getters.session != null; }
  }
}
</script>

Common Mistakes

❌ Mistake: Using $root for Shared State

// ✗ WRONG: Race conditions between components
this.$root.authenticated = true;

// ✗ WRONG: Vue 3 doesn't have $set
this.$set(this.$root, 'authenticated', true);

Why it fails: Multiple components may initialize $root at different times, causing race conditions. Vue 3 has automatic reactivity and doesn't need $set.

✓ Solution: Use store pattern:

// ✓ CORRECT: Single source of truth
context.commit("session", { user: data.user });

❌ Mistake: Duplicate Initialization

// ✗ WRONG: Multiple components initializing state
// Chat component
mounted() { this.checkSession(); }

// AuthDialog component  
mounted() { this.checkSession(); }

Why it fails: Race conditions, unnecessary API calls, state conflicts.

✓ Solution: Single initialization:

// ✓ CORRECT: One check on document ready
$(document).ready(function() {
  store.dispatch("setup_session");
});

❌ Mistake: Accessing Store Directly in Templates

<!-- ✗ WRONG -->
<v-layout v-if="store.getters.session != null">

Why it fails: Vue templates can't access store directly, and it's not reactive.

✓ Solution: Use computed properties:

computed: {
  authenticated() { return store.getters.session != null; }
}

<!-- ✓ CORRECT -->
<v-layout v-if="authenticated">

Vue 3 Reactivity

Automatic Reactivity

Vue 3 has automatic reactivity for plain objects. No need for $set:

// Vue 2 (deprecated)
this.$set(this.someObject, 'key', value);

// Vue 3 (correct)
this.someObject.key = value;

Computed Properties for Store Access

Always use computed properties to access store state:

computed: {
  user() { return store.getters.session?.user; },
  authenticated() { return store.getters.session != null; }
}

Watchers for Side Effects

Use watchers when you need to react to state changes:

watch: {
  authenticated(newVal) {
    if (newVal) {
      this.connectSocket();
    } else {
      this.disconnectSocket();
    }
  }
}

Component Lifecycle

mounted() for Initialization

mounted() {
  // Component is in DOM, safe to access refs
  this.$refs.inputField?.focus();

  // Set up event listeners
  socket.on('message', this.handleMessage);
}

beforeUnmount() for Cleanup

beforeUnmount() {
  // Clean up event listeners
  socket.off('message', this.handleMessage);
}

Related Skills

• vuetify-v4 — Vuetify 4 specific layouts and components
• baseweb — Baseweb project structure and patterns

Source: christophevg/c3 — distributed by TomeVault.