Project: API Dashboard with Directives and Plugins

This is the main module project! We'll combine everything we've learned: custom directives, plugins, and HTTP/API communication into one cohesive system — the NOVA LAB Command Center Dashboard.

Project Architecture

Our dashboard contains:

1. Toast Plugin — notifications about station events
2. Custom Directives — v-focus, v-tooltip, v-highlight
3. Composable useFetch — fetching data from an API
4. Loading/error/data states — error handling
5. CRUD Actions — adding and removing data

Code Structure

Toast Plugin:

1const ToastPlugin = {
2  install(app) {
3    const toasts = ref([])
4    let id = 0
5
6    app.provide('toast', {
7      show(message, type = 'info') {
8        const toastId = id++
9        toasts.value.push({ id: toastId, message, type })
10        setTimeout(() => {
11          toasts.value = toasts.value.filter(t => t.id !== toastId)
12        }, 3000)
13      },
14      success(msg) { this.show(msg, 'success') },
15      error(msg) { this.show(msg, 'error') },
16      list: toasts
17    })
18  }
19}

Custom Directives:

1app.directive('focus', {
2  mounted(el) { el.focus() }
3})
4
5app.directive('highlight', (el, binding) => {
6  el.style.border = `2px solid ${binding.value || '#00ff88'}`
7})

Composable:

1function useFetch(url) {
2  const data = ref(null)
3  const loading = ref(false)
4  const error = ref(null)
5
6  async function execute() {
7    loading.value = true
8    error.value = null
9    try {
10      const res = await fetch(url)
11      data.value = await res.json()
12    } catch (err) {
13      error.value = err.message
14    } finally {
15      loading.value = false
16    }
17  }
18
19  execute()
20  return { data, loading, error, refetch: execute }
21}

Combining into a Dashboard

The dashboard displays:

• A list of missions fetched from the API
• A form for adding new missions
• Toast notifications for actions
• Directives for interactivity (focus, highlight)

This project demonstrates how different parts of Vue (directives, plugins, composables) work together in a real application.