Vue ViaCEP Plugin

Plugin Vue 3 para consulta de CEP e pesquisa de endereco usando o Web Service gratuito do ViaCEP.

Recursos

• Consulta por CEP com validacao local de 8 digitos.
• Tratamento de CEP inexistente retornado como { "erro": true }.
• Pesquisa por UF, cidade e logradouro.
• Componente <ViaCepLookup /> pronto para uso.
• Composable useViaCep() para fluxos customizados.
• Cliente standalone createViaCepClient() para uso fora de componentes.

Instalar

npm install
npm run dev

Para publicar ou usar como biblioteca:

npm run build -- --mode lib

Registrar no Vue

import { createApp } from 'vue';
import ViaCepPlugin from 'vue-viacep-plugin';
import 'vue-viacep-plugin/style.css';
import App from './App.vue';

createApp(App)
  .use(ViaCepPlugin)
  .mount('#app');

Com URL customizada:

import { createViaCepPlugin } from 'vue-viacep-plugin';

app.use(createViaCepPlugin({
  baseUrl: 'https://viacep.com.br/ws'
}));

Componente

<template>
  <ViaCepLookup v-model="cep" @found="address = $event" @error="message = $event" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ViaCepAddress } from 'vue-viacep-plugin';

const cep = ref('');
const message = ref('');
const address = ref<ViaCepAddress | null>(null);
</script>

Composable

<script setup lang="ts">
import { useViaCep } from 'vue-viacep-plugin';

const { loading, error, address, results, searchByCep, searchByAddress } = useViaCep();

await searchByCep('01001000');

await searchByAddress({
  uf: 'RS',
  cidade: 'Porto Alegre',
  logradouro: 'Domingos Jose'
});
</script>

Cliente standalone

import { createViaCepClient } from 'vue-viacep-plugin';

const viaCep = createViaCepClient();
const address = await viaCep.fetchCep('01001000');
const list = await viaCep.searchAddress({
  uf: 'RS',
  cidade: 'Porto Alegre',
  logradouro: 'Domingos Jose'
});

Validacoes implementadas

• CEP aceita somente 8 digitos apos remover mascara.
• Pesquisa por endereco exige UF com 2 letras.
• Cidade e logradouro exigem no minimo 3 caracteres.
• Respostas HTTP 400 sao convertidas em erro de validacao.
• Resposta { "erro": true } vira erro NOT_FOUND.