docs: orientar uso do pacote em projetos consumidores

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
+<template>
+  <EliBotao @click="salvar">Salvar</EliBotao>
+</template>
+```
+
+### EliInput (v-model)
+
+```vue
+<template>
+  <EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {
+    const nome = ref("");
+    return { nome };
+  },
+});
+</script>
+```
+
+### EliBadge
+
+```vue
+<template>
+  <EliBadge badge="3">
+    <v-icon>mdi-bell</v-icon>
+  </EliBadge>
+</template>
+```
+
+## 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 `<v-icon>` 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