You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To get full user account, contact me on my <ahref="http://id-a.pl"target="_blank">company site</a>.
34
-
35
21
## Functions
36
22
Vue CRUD provides a set of utitlities, from which you can compose your own application. Features included in the system can communicate with each other thanks to the use of the Vuex library. Vue CRUD includes the following elements:
To get full user account, contact me on my <ahref="http://id-a.pl"target="_blank">company site</a>.
97
88
98
89
## Quick start
99
90
100
91
Do you want to test the application quickly, and you do not have a ready API? No problem, you can use the ready-made example in the **examples** folder. The API for this example is available on the internet, so you can connect to it by entering its address in the configuration file.
- Select template from **examples** folder you want to use, e.g. **examples/simple-crud**. Then:
105
100
- Copy **examples/simple-crud/public** folder to the root directory,
106
101
- Copy the rest of files and folders (**config**, **locales**, **routes**, **main.js**, **router.js**) from **examples/simple-crud** folder to the **src** directory,
@@ -120,9 +115,80 @@ npm run serve
120
115
```
121
116
... and your app is already running (probably at http://localhost:8080).
122
117
118
+
### Usage
119
+
120
+
The simplest possible code that supports CRUD operations for one table will look something like this:
import Crud from '@/utils/crud/components/Crud.vue'
132
+
import AlertBox from "@/utils/app/components/AlertBox.vue";
133
+
export default {
134
+
data() {
135
+
return {
136
+
prefix: 'demo',
137
+
path: 'tasks',
138
+
pageTitle: 'demo.tasks',
139
+
}
140
+
},
141
+
computed: {
142
+
fieldsInfo() {
143
+
return [{
144
+
text: this.$t('fields.id'),
145
+
name: 'id',
146
+
details: false,
147
+
},
148
+
{
149
+
type: 'input',
150
+
column: 'name',
151
+
text: this.$t('fields.name'),
152
+
name: 'name',
153
+
multiedit: false
154
+
},
155
+
{
156
+
type: 'input',
157
+
column: 'description',
158
+
text: this.$t('fields.description'),
159
+
name: 'description',
160
+
required: false
161
+
},
162
+
]
163
+
},
164
+
},
165
+
components: {
166
+
Crud,
167
+
AlertBox,
168
+
},
169
+
i18n: {
170
+
messages: {
171
+
en: {
172
+
detailsTitle: 'Task',
173
+
fields: {
174
+
id: 'Id',
175
+
name: 'Name',
176
+
description: 'Description'
177
+
}
178
+
}
179
+
}
180
+
},
181
+
}
182
+
</script>
183
+
```
184
+
123
185
## API
124
186
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 <ahref="https://github.com/szczepanmasny/vue-crud-laravel-api"target="_blank">Vue CRUD Laravel API project</a>.
0 commit comments