Vue 2 — Module 3 & 4: Architecture, Vuex 3 & Vue Router v3

<script>
export default {
  name: 'ThemeProvider',
  data() {
    return {
      theme: { mode: 'dark', accent: '#16a34a' }
    }
  },
  provide() {
    // Non-reactive by default — provide() runs once at creation.
    // To keep reactivity, provide a reference to `this` or use a reactive object directly.
    return {
      theme: this.theme,
      updateTheme: this.updateTheme
    }
  },
  methods: {
    updateTheme(patch) {
      Object.assign(this.theme, patch)
    }
  }
}
</script>

<script>
export default {
  name: 'DeeplyNestedButton',
  inject: ['theme', 'updateTheme'],
  // theme is the SAME object reference provided above, so mutating its
  // properties (not reassigning it) still triggers reactive updates
  // in every component that reads theme.mode / theme.accent.
}
</script>

<template>
  <button :style="{ background: theme.accent }" @click="updateTheme({ mode: 'light' })">
    Toggle Theme
  </button>
</template>

import Vue from 'vue'
export const EventBus = new Vue()

<script>
import { EventBus } from '@/eventBus'

export default {
  created() {
    EventBus.$on('notification:new', this.handleNotification)
  },
  beforeDestroy() {
    // MANDATORY — without this, the listener holds a closure reference
    // to `this`, keeping the entire component instance (and its DOM,
    // if detached incorrectly) alive in memory after the component
    // is unmounted. Every route navigation compounds the leak.
    EventBus.$off('notification:new', this.handleNotification)
  },
  methods: {
    handleNotification(payload) {
      this.$emit('bell-ring', payload)
    }
  }
}
</script>

<template>
  <div>
    <CustomInput ref="emailInput" v-model="email" />
    <button @click="focusEmail">Edit Email</button>
  </div>
</template>

<script>
export default {
  data: () => ({ email: '' }),
  methods: {
    focusEmail() {
      // Legitimate use: imperative DOM focus cannot be expressed declaratively
      this.$refs.emailInput.focus()
    }
  }
}
</script>

export const paginationMixin = {
  data() {
    return { currentPage: 1, perPage: 20 }
  },
  computed: {
    totalPages() {
      // Assumes `this.items` exists on the consuming component —
      // an implicit contract that isn't visible from the mixin's own code.
      return Math.ceil(this.items.length / this.perPage)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}

<!-- Scoped slot approach: explicit, inspectable, no implicit merging -->
<template>
  <div>
    <slot
      v-for="item in pagedItems"
      :key="item.id"
      :item="item"
      :page="currentPage"
    />
    <button @click="currentPage++" :disabled="currentPage >= totalPages">Next</button>
  </div>
</template>

<script>
export default {
  props: { items: { type: Array, required: true }, perPage: { type: Number, default: 20 } },
  data: () => ({ currentPage: 1 }),
  computed: {
    totalPages() { return Math.ceil(this.items.length / this.perPage) },
    pagedItems() {
      const start = (this.currentPage - 1) * this.perPage
      return this.items.slice(start, start + this.perPage)
    }
  }
}
</script>

// Module-isolated store slice — namespaced to avoid action/mutation name collisions
// across modules as the app scales.
const state = () => ({
  products: [],
  loading: false
})

const getters = {
  totalUnits: (state) => state.products.reduce((sum, p) => sum + p.stock, 0),
  lowStock: (state) => state.products.filter((p) => p.stock > 0 && p.stock < 10)
}

const mutations = {
  SET_LOADING(state, value) {
    state.loading = value
  },
  SET_PRODUCTS(state, products) {
    state.products = products
  },
  ADJUST_STOCK(state, { id, delta }) {
    const product = state.products.find((p) => p.id === id)
    if (product) product.stock = Math.max(0, product.stock + delta)
  }
}

const actions = {
  async fetchProducts({ commit }) {
    commit('SET_LOADING', true)
    try {
      const res = await fetch('/api/products')
      const data = await res.json()
      commit('SET_PRODUCTS', data)
    } finally {
      commit('SET_LOADING', false)
    }
  },
  adjustStock({ commit }, payload) {
    commit('ADJUST_STOCK', payload)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

import Vue from 'vue'
import Vuex from 'vuex'
import inventory from './modules/inventory'
import auth from './modules/auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: { inventory, auth },
  strict: import.meta.env.DEV // throws if state is mutated outside a mutation, dev-only (perf cost)
})

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('inventory', ['products', 'loading']),
    ...mapGetters('inventory', ['totalUnits', 'lowStock'])
  },
  created() {
    this.fetchProducts()
  },
  methods: {
    ...mapActions('inventory', ['fetchProducts', 'adjustStock'])
  }
}
</script>

<template>
  <form class="form-builder" @submit.prevent="handleSubmit">
    <div v-for="field in schema" :key="field.key" class="form-builder__field">
      <!-- Scoped slot: parent decides the exact input markup per field type -->
      <slot
        :name="field.type"
        :field="field"
        :value="formState[field.key]"
        :setValue="(val) => setField(field.key, val)"
      >
        <!-- Fallback default rendering if no matching named slot is provided -->
        <label :for="field.key">{{ field.label }}</label>
        <input
          :id="field.key"
          :value="formState[field.key]"
          @input="setField(field.key, $event.target.value)"
        />
      </slot>
    </div>
    <button type="submit">Save</button>
  </form>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  props: {
    schema: { type: Array, required: true } // [{ key, label, type }]
  },
  data() {
    const formState = {}
    this.schema.forEach((f) => { formState[f.key] = f.default ?? '' })
    return { formState }
  },
  methods: {
    ...mapActions('forms', ['submitForm']),
    setField(key, value) {
      this.$set(this.formState, key, value) // needed if key wasn't in initial data — see Module 5
    },
    handleSubmit() {
      this.submitForm({ ...this.formState })
    }
  }
}
</script>

<style scoped>
.form-builder__field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
</style>

<template>
  <DynamicFormBuilder :schema="productSchema">
    <!-- Custom rendering for 'select' type fields, data injected via scoped slot -->
    <template #select="{ field, value, setValue }">
      <label :for="field.key">{{ field.label }}</label>
      <select :id="field.key" :value="value" @change="setValue($event.target.value)">
        <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
      </select>
    </template>
  </DynamicFormBuilder>
</template>

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    // Route-level code splitting: this chunk is only fetched when visited
    component: () => import('@/views/HomeView.vue')
  },
  {
    path: '/products/:id',
    name: 'product-detail',
    component: () => import('@/views/ProductDetailView.vue'),
    props: true // route.params.id is passed as a prop, not read via $route
  },
  {
    path: '/dashboard',
    component: () => import('@/layouts/DashboardLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      // Nested routes render into the parent's <router-view>
      { path: '', name: 'dashboard-overview', component: () => import('@/views/dashboard/Overview.vue') },
      { path: 'settings', name: 'dashboard-settings', component: () => import('@/views/dashboard/Settings.vue') }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: import.meta.env.BASE_URL,
  routes
})

export default router

// Programmatic navigation — never mutate window.location directly, it forces a full reload
this.$router.push({ name: 'product-detail', params: { id: 42 } })
this.$router.replace({ path: '/dashboard/settings' }) // no history entry added
this.$router.go(-1) // back one entry

import router from './index'
import store from '@/store'

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
  const isAuthenticated = store.getters['auth/isAuthenticated']

  if (requiresAuth && !isAuthenticated) {
    next({ name: 'login', query: { redirect: to.fullPath } })
  } else {
    next()
  }
})

<script>
export default {
  data: () => ({ isDirty: false }),
  beforeRouteLeave(to, from, next) {
    if (this.isDirty && !window.confirm('Discard unsaved changes?')) {
      next(false) // cancel navigation
    } else {
      next()
    }
  }
}
</script>

export const clickOutside = {
  bind(el, binding) {
    el.__clickOutsideHandler__ = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el.__clickOutsideHandler__)
  },
  unbind(el) {
    // Mandatory cleanup — same leak risk pattern as the EventBus example above
    document.removeEventListener('click', el.__clickOutsideHandler__)
    delete el.__clickOutsideHandler__
  }
}

import { clickOutside } from '@/directives/clickOutside'
Vue.directive('click-outside', clickOutside)

<template>
  <div v-click-outside="closeMenu" class="dropdown">
    <button @click="isOpen = !isOpen">Menu</button>
    <ul v-show="isOpen">
      <li>Option A</li>
      <li>Option B</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => ({ isOpen: false }),
  methods: { closeMenu() { this.isOpen = false } }
}
</script>

export const lazyImage = {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    }, { rootMargin: '50px' })
    observer.observe(el)
    el.__lazyObserver__ = observer
  },
  unbind(el) {
    el.__lazyObserver__?.disconnect()
  }
}

<template>
  <div class="dashboard-overview">
    <h1>Welcome back, {{ user.name }}</h1>
    <div class="dashboard-overview__grid">
      <img
        v-for="item in recentProducts"
        :key="item.id"
        v-lazy-image="item.imageUrl"
        src="/placeholder.svg"
        :alt="item.name"
        class="dashboard-overview__thumb"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('auth', ['user']),
    ...mapState('inventory', { recentProducts: (state) => state.products.slice(0, 12) })
  },
  beforeRouteEnter(to, from, next) {
    // No `this` available yet — use the callback form to access the instance
    // once the component has been created and route is confirmed.
    next((vm) => {
      vm.$store.dispatch('inventory/fetchProducts')
    })
  }
}
</script>

<style scoped>
.dashboard-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.dashboard-overview__thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f1f1;
}
</style>