# @hcflgov/vue-esri-search

> ![NPM](https://img.shields.io/npm/v/@hcflgov/vue-esri-search.svg)

Latest version **2.2.1** (published 2022-08-19) · 0 weekly downloads

## Install

```sh
npm install @hcflgov/vue-esri-search
pnpm add @hcflgov/vue-esri-search
yarn add @hcflgov/vue-esri-search
bun add @hcflgov/vue-esri-search
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2022-08-19 |
| First published | 2019-04-05 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mccarthyk, jordanpisani |

## Links

- npm: https://www.npmjs.com/package/@hcflgov/vue-esri-search
- Homepage: https://github.com/Commbocc/hcflgov-vue-esri-search
- npm.io page: https://npm.io/package/@hcflgov/vue-esri-search

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.25
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) ^4.22.2

## Recent versions

- 2.2.1 (latest) — 2022-08-19
- 2.2.0 — 2022-08-19
- 2.1.0 — 2022-04-11
- 2.0.0 — 2022-04-07
- 1.2.0-0 — 2020-09-23
- 1.1.1 — 2019-05-03
- 1.1.0 — 2019-05-03
- 1.0.1 — 2019-04-05

## README

# @hcflgov/vue-esri-search

![NPM](https://img.shields.io/npm/v/@hcflgov/vue-esri-search.svg)

- [See a demo](https://commbocc.github.io/hcflgov-vue-esri-search/)
- [View the documentation](https://commbocc.github.io/hcflgov-vue-esri-search/docs/)

## Installation

Create a Vue project using [Vite](https://vitejs.dev/guide/).

```bash
yarn create vite new-proj
```

```bash
yarn add @hcflgov/vue-esri-search
```

### Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## Project setup

### Bootstrap

Optionally add [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/#quick-start)

```html
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>
```

### Usage

```html
<!-- src/App.vue -->
<script setup>
  import {
    SearchBootstrap,
    featureLayerProps,
    queryFeatures,
  } from '@hcflgov/vue-esri-search'

  // set feature layer url to query against
  featureLayerProps.url =
    'https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Counties/FeatureServer/0'

  // SearchBootstrap's submit event
  const watchResults = async (results) => {
    try {
      if (!results.length) throw 'No Search Results'
      const [firstResult] = results

      // query result's geometry against feature layer
      const queriedFeatures = await queryFeatures(firstResult?.feature?.geometry,, {
        // returnGeometry: true,
      })

      console.log('fun with features!', queriedFeatures)
    } catch (error) {
      console.warn(error)
    }
  }
</script>

<template>
  <SearchBootstrap hc-sources large @results="watchResults" />
</template>
```

Using typescript?

```ts
const watchResults = async (results: __esri.SearchResult[]) => {}
```

---
_Source: https://npm.io/package/@hcflgov/vue-esri-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._