tomevault-io TypeScript Vue Svelte Skill
Overview
This skill provides guidelines for Vue 3 and Svelte 5 development with TypeScript, focusing on composition API, stores, and type-safe patterns.
Vue 3 Patterns
1. Composition API
<!-- DO: Use <script setup> with TypeScript -->
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import type { User, UserFilters } from '@/types';
// Props with type safety
interface Props {
user: User;
editable?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
editable: false,
});
// Emits with type safety
const emit = defineEmits<{
(e: 'update', user: User): void;
(e: 'delete', id: string): void;
}>();
// Reactive state
const isEditing = ref(false);
const formData = ref<Partial<User>>({ ...props.user });
const errors = ref<Record<string, string>>({});
// Computed
const fullName = computed(() => {
return `${props.user.firstName} ${props.user.lastName}`;
});
const isValid = computed(() => {
return formData.value.email?.includes('@') && formData.value.firstName;
});
// Watch
watch(() => props.user, (newUser) => {
formData.value = { ...newUser };
}, { deep: true });
// Methods
function handleSubmit() {
if (!isValid.value) return;
emit('update', formData.value as User);
isEditing.value = false;
}
// Lifecycle
onMounted(() => {
console.log('UserCard mounted:', props.user.id);
});
</script>
2. Composables
// composables/useUsers.ts
import { ref, computed } from 'vue';
import type { User, UserFilters, Pagination } from '@/types';
interface UseUsersOptions {
pageSize?: number;
filters?: UserFilters;
}
export function useUsers(options: UseUsersOptions = {}) {
const { pageSize = 10, filters = {} } = options;
// State
const users = ref<User[]>([]);
const loading = ref(false);
const error = ref<Error | null>(null);
const pagination = ref<Pagination>({
page: 1,
total: 0,
pageSize,
});
// Computed
const hasMore = computed(() => {
return pagination.value.page * pagination.value.pageSize < pagination.value.total;
});
// Methods
async function fetchUsers() {
loading.value = true;
error.value = null;
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify({
page: pagination.value.page,
pageSize: pagination.value.pageSize,
filters,
}),
});
if (!response.ok) throw new Error('Failed to fetch');
const data = await response.json();
users.value = data.users;
pagination.value.total = data.total;
} catch (e) {
error.value = e as Error;
} finally {
loading.value = false;
}
}
function nextPage() {
if (hasMore.value) {
pagination.value.page++;
fetchUsers();
}
}
function previousPage() {
if (pagination.value.page > 1) {
pagination.value.page--;
fetchUsers();
}
}
return {
users: readonly(users),
loading: readonly(loading),
error: readonly(error),
pagination: readonly(pagination),
hasMore,
fetchUsers,
nextPage,
previousPage,
};
}
// composables/useLocalStorage.ts
import { ref, watch } from 'vue';
export function useLocalStorage<T>(key: string, defaultValue: T) {
const stored = localStorage.getItem(key);
const data = ref<T>(stored ? JSON.parse(stored) : defaultValue);
watch(data, (newValue) => {
localStorage.setItem(key, JSON.stringify(newValue));
}, { deep: true });
return data;
}
3. Pinia Store
// stores/user.ts
import { defineStore } from 'pinia';
import type { User } from '@/types';
export const useUserStore = defineStore('user', {
state: () => ({
currentUser: null as User | null,
isAuthenticated: false,
loading: false,
error: null as Error | null,
}),
getters: {
isAdmin: (state) => state.currentUser?.role === 'admin',
userName: (state) => state.currentUser?.name ?? 'Guest',
},
actions: {
async login(email: string, password: string) {
this.loading = true;
this.error = null;
try {
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
if (!response.ok) throw new Error('Login failed');
const data = await response.json();
this.currentUser = data.user;
this.isAuthenticated = true;
localStorage.setItem('token', data.token);
} catch (e) {
this.error = e as Error;
} finally {
this.loading = false;
}
},
logout() {
this.currentUser = null;
this.isAuthenticated = false;
localStorage.removeItem('token');
},
},
});
// stores/index.ts - Setup store alternative
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
// State
const count = ref(0);
// Getters
const doubleCount = computed(() => count.value * 2);
const isPositive = computed(() => count.value > 0);
// Actions
function increment() {
count.value++;
}
function decrement() {
count.value--;
}
return { count, doubleCount, isPositive, increment, decrement };
});
4. Component Patterns
<!-- DO: Scoped slots for flexible composition -->
<script setup lang="ts">
import { computed } from 'vue';
import type { TableColumn, TableItem } from '@/types';
interface Props<T extends TableItem> {
items: T[];
columns: TableColumn<T>[];
loading?: boolean;
}
const props = defineProps<Props<any>>();
const sortedItems = computed(() => {
// Sorting logic
return props.items;
});
</script>
<template>
<table class="data-table">
<thead>
<tr>
<th v-for="col in columns" :key="col.key">
{{ col.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in sortedItems" :key="item.id">
<td v-for="col in columns" :key="col.key">
<slot :name="col.key" :item="item" :value="item[col.key]">
{{ item[col.key] }}
</slot>
</td>
</tr>
</tbody>
<slot v-if="loading" name="loading">
<tr><td :colspan="columns.length">Loading...</td></tr>
</slot>
</table>
</template>
<!-- Usage -->
<DataTable :items="users" :columns="userColumns">
<template #status="{ item }">
<StatusBadge :status="item.status" />
</template>
<template #actions="{ item }">
<button @click="edit(item)">Edit</button>
</template>
</DataTable>
Svelte 5 Patterns
1. Runes (Svelte 5)
<script lang="ts">
import type { User } from './types';
// Props
interface Props {
user: User;
editable?: boolean;
}
let { user, editable = false }: Props = $props();
// Reactive state with $state
let isEditing = $state(false);
let formData = $state({ ...user });
// Derived state with $derived
let fullName = $derived(`${user.firstName} ${user.lastName}`);
let isValid = $derived(
formData.email?.includes('@') && formData.firstName?.length > 0
);
// Effects with $effect
$effect(() => {
console.log('User changed:', user.id);
// Cleanup function
return () => {
console.log('Cleaning up for user:', user.id);
};
});
// Effect pre-run with $effect.pre (before DOM update)
$effect.pre(() => {
// Access DOM before it's updated
const element = document.getElementById('user-form');
});
// Functions
function handleSubmit() {
if (!isValid) return;
// Submit logic
isEditing = false;
}
</script>
<h2>{fullName}</h2>
{#if editable}
<button => isEditing = !isEditing}>
{isEditing ? 'Cancel' : 'Edit'}
</button>
{/if}
2. Stores
// stores/user.ts
import { writable, derived, readonly } from 'svelte/store';
import type { User } from './types';
// Writable store
function createUserStore() {
const { subscribe, set, update } = writable<User | null>(null);
return {
subscribe,
set,
update,
login: async (email: string, password: string) => {
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
if (!response.ok) throw new Error('Login failed');
const data = await response.json();
set(data.user);
localStorage.setItem('token', data.token);
},
logout: () => {
set(null);
localStorage.removeItem('token');
},
};
}
export const user = createUserStore();
// Derived store
export const isAdmin = derived(user, $user => $user?.role === 'admin');
export const isAuthenticated = derived(user, $user => $user !== null);
// Custom store
function createLocalStorage<T>(key: string, initialValue: T) {
const stored = localStorage.getItem(key);
const { subscribe, set } = writable<T>(
stored ? JSON.parse(stored) : initialValue
);
return {
subscribe,
set: (value: T) => {
localStorage.setItem(key, JSON.stringify(value));
set(value);
},
};
}
export const theme = createLocalStorage<'light' | 'dark'>('theme', 'light');
3. Component Patterns
<!-- DO: Component events -->
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import type { User } from './types';
interface Props {
user: User;
editable?: boolean;
}
let { user, editable = false }: Props = $props();
const dispatch = createEventDispatcher<{
update: User;
delete: string;
}>();
function handleUpdate() {
dispatch('update', user);
}
function handleDelete() {
dispatch('delete', user.id);
}
</script>
<div class="user-card">
<h3>{user.name}</h3>
{#if editable}
<button
<button
{/if}
</div>
<!-- Usage -->
<UserCard
{user}
editable={true}
on:update={(e) => console.log('Update:', e.detail)}
on:delete={(e) => console.log('Delete:', e.detail)}
/>
<!-- DO: Slot patterns -->
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
title: string;
children: Snippet;
actions?: Snippet;
}
let { title, children, actions }: Props = $props();
</script>
<div class="card">
<header>
<h2>{title}</h2>
{#if actions}
<div class="actions">
{@render actions()}
</div>
{/if}
</header>
<div class="content">
{@render children()}
</div>
</div>
<!-- Usage -->
<Card title="User Profile">
{#snippet actions()}
<button>Edit</button>
<button>Delete</button>
{/snippet}
<p>User content here</p>
</Card>
4. Transitions and Animations
<script lang="ts">
import { fade, fly, slide, scale } from 'svelte/transition';
import { flip } from 'svelte/animate';
import type { Todo } from './types';
let todos = $state<Todo[]>([]);
let showCompleted = $state(true);
function addTodo(text: string) {
todos = [...todos, { id: crypto.randomUUID(), text, completed: false }];
}
function toggleTodo(id: string) {
todos = todos.map(t =>
t.id === id ? { ...t, completed: !t.completed } : t
);
}
</script>
<ul>
{#each todos.filter(t => showCompleted || !t.completed) as todo (todo.id)}
<li
animate:flip={{ duration: 200 }}
transition:slide={{ duration: 300 }}
>
<label>
<input
type="checkbox"
checked={todo.completed}
=> toggleTodo(todo.id)}
/>
<span class:completed={todo.completed}>
{todo.text}
</span>
</label>
</li>
{/each}
</ul>
{#if todos.length === 0}
<p transition:fade>No todos yet</p>
{/if}
<style>
.completed {
text-decoration: line-through;
opacity: 0.6;
}
</style>
When to Use
Use this skill when:
- Building Vue 3 applications with Composition API
- Working with Svelte 5 and runes
- Creating reusable composables/composables
- Managing state with Pinia (Vue) or Svelte stores
- Designing component architecture
- TypeScript integration with Vue/Svelte
Converted and distributed by TomeVault — claim your Tome and manage your conversions.