Skip to content

Commit 8df3099

Browse files
Update README.md
1 parent 2026a93 commit 8df3099

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,73 @@ npm run serve
120120
```
121121
... and your app is already running (probably at http://localhost:8080).
122122

123+
### Usage
124+
125+
The simplest possible code that supports CRUD operations for one table will look something like this:
126+
```vue
127+
<template>
128+
<div>
129+
<crud :prefix="prefix" :path="path" :pageTitle="pageTitle" :fieldsInfo="fieldsInfo" :detailsTitle="$t('detailsTitle')">
130+
</crud>
131+
<alert-box></alert-box>
132+
</div>
133+
</template>
134+
135+
<script>
136+
import Crud from '@/utils/crud/components/Crud.vue'
137+
import AlertBox from "@/utils/app/components/AlertBox.vue";
138+
export default {
139+
data() {
140+
return {
141+
prefix: 'demo',
142+
path: 'tasks',
143+
pageTitle: 'demo.tasks',
144+
}
145+
},
146+
computed: {
147+
fieldsInfo() {
148+
return [{
149+
text: this.$t('fields.id'),
150+
name: 'id',
151+
details: false,
152+
},
153+
{
154+
type: 'input',
155+
column: 'name',
156+
text: this.$t('fields.name'),
157+
name: 'name',
158+
multiedit: false
159+
},
160+
{
161+
type: 'input',
162+
column: 'description',
163+
text: this.$t('fields.description'),
164+
name: 'description',
165+
required: false
166+
},
167+
]
168+
},
169+
},
170+
components: {
171+
Crud,
172+
AlertBox,
173+
},
174+
i18n: {
175+
messages: {
176+
en: {
177+
detailsTitle: 'Task',
178+
fields: {
179+
id: 'Id',
180+
name: 'Name',
181+
description: 'Description'
182+
}
183+
}
184+
}
185+
},
186+
}
187+
</script>
188+
```
189+
123190
## API
124191
The application requires a connection with the appropriate API. API can be created in any technology - the condition is its compliance with the Vue CRUD communication specification. If you need to create your API and do not know how to get started, and you don't mind PHP and Laravel, download or clone the <a href="https://github.com/szczepanmasny/vue-crud-laravel-api" target="_blank">Vue CRUD Laravel API project</a>.
125192

0 commit comments

Comments
 (0)