Vue 3 Architecture Assistant (DigifyNew)

Provides expert guidance for working with the DigifyNew codebase—a modern Vue 3 application using Composition API, TypeScript strict mode, Vuetify 3, Pinia state management, and Socket.io for real-time communication.

What This Skill Does

This skill helps you navigate the DigifyNew architecture, enforce critical architectural constraints, implement modern Vue 3 patterns, manage state with Pinia, handle authentication flows, create dashboard modules, and migrate legacy code while maintaining server communication contracts.

Instructions

Step 1: Understand Critical Constraints

**NEVER modify these shared modules—they define the server contract:**

**Server communication rules:**

Step 2: Follow Modern Architecture Patterns

When writing or reviewing code, ensure:

Step 3: Navigate the Architecture

**Key stores (Pinia):**

**Authentication flow:**

1. User authenticates via mobile/password or Microsoft SSO

2. Server returns JWT token with `PortalID`, `systemid`, `userid`, `AccessLevelID`, `roles`, `expire`, `SessionID`

3. Token stored in localStorage per system

4. Bearer token added to all API requests

5. Automatic refresh 30 minutes before expiry

**Socket.io integration:**

Step 4: Create Dashboard Modules

To add a new dashboard module:

1. **Add module enum** to shared types (if not already present)

2. **Create component** in `/src/components/dashboard-modules/`

3. **Register** in module registry (`/src/modules/registry/`)

4. **Follow template pattern:**

```vue

<template>

<v-card>

<v-card-title v-if="showHeader">

{{ title }}

</v-card-title>

<v-card-text>

<!-- Module content -->

</v-card-text>

</v-card>

</template>

<script setup lang="ts">

import { computed } from 'vue'

import type { DashboardElement } from '@/types/dashboard'

interface Props {

element: DashboardElement

}

const props = defineProps<Props>()

const title = computed(() => props.element.title || 'Module Title')

const showHeader = computed(() => props.element.showHeader !== false)

</script>

```

Step 5: Migrate Legacy Code (DigifyOld)

When migrating components from DigifyOld:

1. **Convert Options API to Composition API** - Use `<script setup>`, reactive refs, computed properties

2. **Update TypeScript patterns** - Add strict types, define interfaces

3. **Replace global properties with composables** - Move shared logic to composables

4. **Update Vuetify 2 → Vuetify 3** - Check breaking changes in Vuetify docs

5. **Ensure server communication unchanged** - Do NOT alter object keys or structure

Step 6: Implement Error Handling

Step 7: Optimize Performance

Step 8: Handle Security

Step 9: Common Pitfalls to Avoid

1. ❌ **Do NOT modify shared modules** (`shared.ts`, `sharedhelpers.ts`)

2. ❌ **Do NOT change server object keys/casing**

3. ❌ **Do NOT use Options API** - Composition API only

4. ❌ **Do NOT use `any` type** - Define proper interfaces

5. ❌ **Do NOT ignore error handling** - Always implement try-catch

Step 10: Development Commands

```bash

Install dependencies

npm install

Start dev server

npm run dev

Build production

npm run build

Type checking

npm run typecheck

Lint

npm run lint

Test

npm run test

```

Examples

**Example 1: Creating a composable for API calls**

```typescript

// composables/useApi.ts

import { ref } from 'vue'

import { useAuthStore } from '@/stores/auth'

export function useApi() {

const authStore = useAuthStore()

const loading = ref(false)

const error = ref<string | null>(null)

async function fetchData<T>(endpoint: string): Promise<T | null> {

loading.value = true

error.value = null

try {

const response = await fetch(endpoint, {

headers: {

'Authorization': `Bearer ${authStore.token}`

}

})

if (!response.ok) throw new Error('API request failed')

return await response.json()

} catch (e) {

error.value = e instanceof Error ? e.message : 'Unknown error'

return null

} finally {

loading.value = false

}

}

return { loading, error, fetchData }

}

```

**Example 2: Migrating Options API component to Composition API**

```vue

<!-- Before (Options API) -->

<script>

export default {

data() {

return { count: 0 }

},

methods: {

increment() {

this.count++

}

}

}

</script>

<!-- After (Composition API) -->

<script setup lang="ts">

import { ref } from 'vue'

const count = ref(0)

const increment = () => count.value++

</script>

```

**Example 3: Pinia store with TypeScript**

```typescript

// stores/company.ts

import { defineStore } from 'pinia'

import type { Company } from '@/types/company'

interface State {

companies: Company[]

loading: boolean

}

export const useCompanyStore = defineStore('company', {

state: (): State => ({

companies: [],

loading: false

}),

getters: {

getCompanyById: (state) => (id: number) =>

state.companies.find(c => c.id === id)

},

actions: {

async fetchCompanies() {

this.loading = true

try {

// Fetch logic

} finally {

this.loading = false

}

}

}

})

```

Constraints

Notes