diff --git a/README.md b/README.md index b23f3c9..6891fcc 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,16 @@ pnpm add eli-vue > Observação: `vue` e `vuetify` são **peerDependencies**. +### Instalação (projeto consumidor já usa Vuetify) + +Se o seu projeto já está configurado com Vuetify 3, basta instalar este pacote: + +```bash +pnpm add eli-vue +``` + +> Dica: mantenha `vue` e `vuetify` atualizados dentro das faixas suportadas. + ## Uso ### 1) Registro global (plugin) @@ -83,12 +93,102 @@ import App from "./App.vue"; createApp(App).use(EliVue).mount("#app"); ``` +#### Exemplo completo (main.ts) — com Vuetify 3 + +Este é o modelo recomendado para projetos consumidores (Vite + Vue 3) **que já usam Vuetify 3**: + +```ts +import { createApp } from "vue"; +import App from "./App.vue"; + +// Vuetify +import "vuetify/styles"; +import { createVuetify } from "vuetify"; + +// eli-vue (Design System) +import EliVue from "eli-vue"; +import "eli-vue/dist/eli-vue.css"; + +const vuetify = createVuetify({ + // opcional: componentes/directives/tema do seu projeto +}); + +createApp(App) + .use(vuetify) + .use(EliVue) + .mount("#app"); +``` + +> Nota: o `eli-vue` **não cria** nem configura Vuetify; ele assume que o consumidor já tem Vuetify. + ### 2) Importação direta de componentes ```ts import { EliBotao, EliInput, EliBadge } from "eli-vue"; ``` +## Exemplos rápidos de uso + +### EliBotao + +```vue + +``` + +### EliInput (v-model) + +```vue + + + +``` + +### EliBadge + +```vue + +``` + +## Troubleshooting (problemas comuns) + +### 1) "Failed to resolve component" / componente não registrado + +Você provavelmente esqueceu de: + +- usar o plugin: `app.use(EliVue)` +- ou importar e registrar o componente localmente + +### 2) Estilos não aplicam / layout estranho + +Confirme que o consumidor importou: + +- `vuetify/styles` +- `eli-vue/dist/eli-vue.css` + +### 3) Ícones não aparecem + +Alguns exemplos usam `` com Material Design Icons. O `eli-vue` **não instala ícones** no seu projeto. + +- garanta que o seu projeto consumidor está configurado com o pacote de ícones desejado (ex.: MDI) +- ou substitua o conteúdo do slot por outro elemento + ## Como rodar localmente ### Playground