@devappsnpm/vue-kit 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @devappsnpm/vue-kit
|
|
2
2
|
|
|
3
3
|
Um toolkit Vue 3 + TypeScript que fornece uma base arquitetural robusta para aplicações frontend que consomem APIs Laravel.
|
|
4
4
|
|
|
5
5
|
## 1. Introdução
|
|
6
|
-
O pacote `@
|
|
6
|
+
O pacote `@devappsnpm/vue-kit` providencia infraestrutura padronizada para:
|
|
7
7
|
- Cliente HTTP (wrapper sobre o Axios)
|
|
8
8
|
- Autenticação (JWT e Sanctum/Cookie)
|
|
9
9
|
- Services Base e Stores do Pinia
|
|
@@ -14,14 +14,14 @@ O pacote `@devapps/vue-kit` providencia infraestrutura padronizada para:
|
|
|
14
14
|
|
|
15
15
|
## 2. Instalação
|
|
16
16
|
```bash
|
|
17
|
-
npm install @
|
|
17
|
+
npm install @devappsnpm/vue-kit
|
|
18
18
|
npm install -D typescript vue pinia
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## 3. Configuração
|
|
22
22
|
Configure a instância do `VueKit`, tipicamente no seu `src/main.ts` ou num arquivo dedicado de configuração:
|
|
23
23
|
```ts
|
|
24
|
-
import { createVueKit } from '@
|
|
24
|
+
import { createVueKit } from '@devappsnpm/vue-kit'
|
|
25
25
|
|
|
26
26
|
export const vueKit = createVueKit({
|
|
27
27
|
api: {
|
|
@@ -41,7 +41,7 @@ Estenda a classe `BaseService` ou utilize `CrudService` para interagir com a sua
|
|
|
41
41
|
|
|
42
42
|
Utilize o `defineCrudStore` para criar rapidamente stores do Pinia completas com todas as funcionalidades de CRUD:
|
|
43
43
|
```ts
|
|
44
|
-
import { defineCrudStore, CrudService } from '@
|
|
44
|
+
import { defineCrudStore, CrudService } from '@devappsnpm/vue-kit'
|
|
45
45
|
|
|
46
46
|
class CustomerService extends CrudService<Customer> {
|
|
47
47
|
constructor() { super(vueKit.http, '/customers') }
|
|
@@ -53,7 +53,7 @@ export const useCustomerStore = defineCrudStore('customer', () => new CustomerSe
|
|
|
53
53
|
## 6. Formulários (Forms)
|
|
54
54
|
A classe `Form<T>` gerencia reativamente o estado, submissão e os erros de validação, integrando-se de maneira transparente aos formatos de resposta padrão do Laravel.
|
|
55
55
|
```ts
|
|
56
|
-
import { Form } from '@
|
|
56
|
+
import { Form } from '@devappsnpm/vue-kit'
|
|
57
57
|
|
|
58
58
|
const form = reactive(new Form({ name: '' }))
|
|
59
59
|
await form.submit(async (data) => service.store(data))
|
|
@@ -76,7 +76,7 @@ Comandos disponíveis:
|
|
|
76
76
|
## 8. Componentes de UI
|
|
77
77
|
Nós fornecemos um entrypoint separado contendo utilitários de UI baseados em Tailwind CSS:
|
|
78
78
|
```ts
|
|
79
|
-
import { BaseModal, ConfirmDeleteModal, ToastContainer, useToast } from '@
|
|
79
|
+
import { BaseModal, ConfirmDeleteModal, ToastContainer, useToast } from '@devappsnpm/vue-kit/ui'
|
|
80
80
|
```
|
|
81
81
|
|
|
82
82
|
Adicione o `ToastContainer` no layout principal da sua aplicação (App.vue) e utilize o composable `useToast` em qualquer lugar para exibir notificações na tela.
|