optimatica-meters-vue

Vue 3 компонент MeterPhotoAnalyzer — загрузка, камера, отправка и отображение результата.

Playground

Попробуйте компонент в браузере: Vue SDK Playground.

Установка

npm install optimatica-meters-vue optimatica-meters

Peer dependency: Vue ^3.5

Подключение

// main.ts
import { createApp } from 'vue'
import { configureZhkhSdk } from 'optimatica-meters-vue'
import App from './App.vue'

configureZhkhSdk({ apiKey: 'eyJhbGci...' })

createApp(App).mount('#app')

<script setup lang="ts">
import { MeterPhotoAnalyzer } from 'optimatica-meters-vue'
import 'optimatica-meters-vue/style.css'
</script>

<template>
  <MeterPhotoAnalyzer api-key="eyJhbGci..." />
</template>

Vue plugin

import { createZhkhSdkPlugin } from 'optimatica-meters-vue'

app.use(createZhkhSdkPlugin({
  apiKey: 'eyJhbGci...',
}))
// регистрирует глобально <ZhkhMeterPhotoAnalyzer />

Props

Prop	Тип	По умолчанию	Описание
apiKey	string	—	API-ключ (JWT)
showApiKeyInput	boolean	auto	Поле ввода ключа
showRawJson	boolean	false	Показать сырой JSON-ответ
disabled	boolean	false	Отключить UI

Events

Event	Payload
analyze-start	File
success	{ success: true, meter }
error	string
complete	(response, error)

Composable

import { useMeterAnalyze } from 'optimatica-meters-vue'

const { isLoading, response, error, analyze, reset } = useMeterAnalyze()

Стили

import 'optimatica-meters-vue/style.css'

Компонент использует scoped CSS с префиксом zhkh-analyzer__* и CSS-переменными — работает без Tailwind.