Skip to content

Commit 84389cb

Browse files
ntuckerntucker
committed
docs(demo): Add vue demo
1 parent 1f3fc10 commit 84389cb

File tree

17 files changed

+2280
-0
lines changed

17 files changed

+2280
-0
lines changed

‎examples/vue-todo-app/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+

‎examples/vue-todo-app/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# Vue Todo App with Data Client
2+
3+
A simple Todo application demonstrating the use of `@data-client/vue` for reactive state management in Vue 3.
4+
5+
## Features
6+
7+
- ✅ Add, toggle, and delete todos
8+
- 🔄 Optimistic updates for instant UI feedback
9+
- 🌐 RESTful API integration with JSONPlaceholder
10+
- 💾 Automatic caching and normalization
11+
- 🎨 Modern, responsive UI
12+
- ⚡ Built with Vite for fast development
13+
14+
## Tech Stack
15+
16+
- **Vue 3** - Progressive JavaScript framework
17+
- **@data-client/vue** - Reactive normalized state management
18+
- **@data-client/rest** - REST resource definitions
19+
- **TypeScript** - Type safety
20+
- **Vite** - Build tool
21+
22+
## Getting Started
23+
24+
### Install Dependencies
25+
26+
```bash
27+
npm install
28+
```
29+
30+
### Run Development Server
31+
32+
```bash
33+
npm run dev
34+
```
35+
36+
The app will be available at `http://localhost:3000`
37+
38+
### Build for Production
39+
40+
```bash
41+
npm run build
42+
```
43+
44+
### Preview Production Build
45+
46+
```bash
47+
npm run preview
48+
```
49+
50+
## Project Structure
51+
52+
```
53+
vue-todo-app/
54+
├── src/
55+
│ ├── components/
56+
│ │ ├── TodoItem.vue # Individual todo item component
57+
│ │ ├── TodoList.vue # Main todo list container
58+
│ │ └── TodoListContent.vue # Todo list content with suspense
59+
│ ├── resources/
60+
│ │ ├── PlaceholderBaseResource.ts # Base resource configuration
61+
│ │ ├── TodoResource.ts # Todo entity and endpoints
62+
│ │ └── UserResource.ts # User entity and endpoints
63+
│ ├── App.vue # Root component
64+
│ └── main.ts # App entry point
65+
├── index.html
66+
├── package.json
67+
├── tsconfig.json
68+
└── vite.config.ts
69+
```
70+
71+
## Key Concepts
72+
73+
### Data Client Integration
74+
75+
The app uses `@data-client/vue` for state management:
76+
77+
- **`DataClientPlugin`** - Vue plugin that provides data client functionality
78+
- **`useSuspense`** - Composable for suspense-based data fetching
79+
- **`useController`** - Composable for triggering mutations (create, update, delete)
80+
81+
### Resource Definitions
82+
83+
Resources are defined using `@data-client/rest`:
84+
85+
- **Entities** - Type-safe data models with normalization
86+
- **Resources** - CRUD endpoints for entities
87+
- **Schemas** - Query definitions for derived data
88+
89+
### Optimistic Updates
90+
91+
The app uses optimistic updates for instant UI feedback. Changes appear immediately while the API request is in flight.
92+
93+
## API
94+
95+
This app uses the [JSONPlaceholder](https://jsonplaceholder.typicode.com) API for demonstration purposes. Note that the API doesn't persist changes, but the app simulates persistence through Data Client's caching.
96+
97+
## Learn More
98+
99+
- [Data Client Documentation](https://dataclient.io)
100+
- [Vue 3 Documentation](https://vuejs.org)
101+
- [@data-client/vue Package](https://www.npmjs.com/package/@data-client/vue)
102+

‎examples/vue-todo-app/env.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue';
5+
const component: DefineComponent<{}, {}, any>;
6+
export default component;
7+
}

‎examples/vue-todo-app/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vue Todo App - Data Client</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>
14+

0 commit comments

Comments
 (0)