Expert guidance for developing with Vue 3, TypeScript, Vuetify 3, and Pinia in the DigifyNew application architecture
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
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.
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.
**NEVER modify these shared modules—they define the server contract:**
**Server communication rules:**
When writing or reviewing code, ensure:
**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:**
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>
```
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
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
```bash
npm install
npm run dev
npm run build
npm run typecheck
npm run lint
npm run test
```
**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
}
}
}
})
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/vue-3-architecture-assistant-digifynew/raw