### Install ADAC API Client

Source: https://github.com/realtimeregister/adac-api-client/blob/master/README.md

Installs the ADAC API client using either Yarn or npm package managers. This is the first step to integrating the client into your project.

```bash
yarn add @realtimeregister/adac-api-client
```

```bash
npm install @realtimeregister/adac-api-client
```

--------------------------------

### Vue with Bootstrap 5: ADAC API Client Integration

Source: https://github.com/realtimeregister/adac-api-client/wiki/Examples

Illustrates integrating the ADAC API client into a Vue.js application styled with Bootstrap 5. This example features a more structured layout for domain input, category selection, and results display, utilizing Bootstrap components for styling.

```vue
<template>
<div class="btn-group d-flex flex-wrap">
    <h4>Check if your domain is available</h4>
    <div class="adac-domain-container rounded-top align-items-center p-3 bg-dark text-white input-group">
        <input type="text" class="form-control" id="adac-js-domain-input" autofocus
               placeholder="Enter domain or keyword">
        <span class="input-group-text">.com</span>
    </div>
    <div id="adac-js-categories" class="categories bg-dark text-white d-flex w-100 m-0 p-3 px-4">
	    <span v-for="category in categories">
        <input type="checkbox" :id="'form_' + category[1]" :value="category[0]" v-model="selectedCategories"
               @change="onChangeDomainInput"/>
        <label :for="'form_'+category[1]">{{category[1]}}</label>
      </span>
    </div>
    <div class="dropdown-menu w-100 shadow-sm top-100 rounded-bottom" id="adac-results-dropdown">
        <div class="row">
            <div class="domain-name-results-wrapper p-3 col-md-6 col-12">
                <h4>Results</h4>
                <div id="adac-js-domain-results" class="domain-results">
	                <div class="domain-result" v-for="domain in results">
		                {{ domain.domain_name }}
	                </div>
                </div>
            </div>
             <div class="suggestions-wrapper p-3 col-md-6 col-12">
                <h4>Suggestions</h4>
                <div id="adac-js-suggestions" class="suggestions">
	                <div v-for="suggestion in suggestions" class="suggestion">
			          {{suggestion.domain_name}}
		        </div>
                </div>
            </div>
		</div>
 	 </div>
</div>
</template>

<script setup>
  import ADAC from '@realtimeregister/adac-api-client'
  import { debounce } from 'es-toolkit' // or write your own simple debounce function.
  import { ref } from 'vue'
  const domainInput = ref('')
  const selectedCategories = ref([])
  const results = ref([])
  const suggestions = ref([])
  const categories = ref([])
  const adac = ADAC.initialize('YOUR_API_KEY', {
        tldSetToken: 'YOUR_TLD_SET_TOKEN'
      }
  )

  adac.onCategories = (categoryResult) => categories.value = categoryResult
  adac.onDomainResult = (domainResult) => results.value.push(domainResult)
  adac.onSuggestion = (suggestionResult) => suggestions.value.push(suggestionResult)
  const onChangeDomainInput = debounce(() => {
    results.value = []
    suggestions.value = []
    adac.processInput(domainInput.value, selectedCategories.value)
  }, 300)
</script>
```

--------------------------------

### Vue: Basic ADAC API Client Integration

Source: https://github.com/realtimeregister/adac-api-client/wiki/Examples

Demonstrates a basic integration of the ADAC API client in a Vue.js application. It includes input fields for domain search, category selection, and displays results and suggestions. Requires the '@realtimeregister/adac-api-client' package and a debounce utility.

```vue
<template>
  <div class="container">
    <input v-model="domainInput" id="adac-js-domain-input" @input.prevent="onChangeDomainInput"/>
    <div style="display:flex;gap:1rem;justify-content:center;">
      <span v-for="category in categories">
        <input type="checkbox" :id="'form_' + category[1]" :value="category[0]" v-model="selectedCategories"
               @change="onChangeDomainInput"/>
        <label :for="'form_'+category[1]">{{category[1]}}</label>
      </span>
    </div>

    <div class="results" style="display: grid; grid-grid-template-columns: 1fr 1fr">
      <div class="domain-results">
        <div v-for="result in results">
          {{result.domain_name}}
        </div>
      </div>
      <div class="domain-suggestions">
        <div v-for="suggestion in suggestions">
          {{suggestion.domain_name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import ADAC from '@realtimeregister/adac-api-client'
  import { debounce } from 'es-toolkit' // or write your own simple debounce function.
  import { ref } from 'vue'

  const domainInput = ref('')
  const selectedCategories = ref([])
  const results = ref([])
  const suggestions = ref([])
  const categories = ref([])

  const adac = ADAC.initialize('YOUR_API_KEY', {
        tldSetToken: 'YOUR_TLD_SET_TOKEN'
      }
  )

  adac.onCategories = (categoryResult) => categories.value = categoryResult
  adac.onDomainResult = (domainResult) => results.value.push(domainResult)
  adac.onSuggestion = (suggestionResult) => suggestions.value.push(suggestionResult)

  const onChangeDomainInput = debounce(() => {
    results.value = []
    suggestions.value = []
    adac.processInput(domainInput.value, selectedCategories.value)
  }, 300)
</script>
```

--------------------------------

### Build ADAC API Client

Source: https://github.com/realtimeregister/adac-api-client/blob/master/README.md

Commands for building the ADAC API client. 'yarn build' compiles for production, while 'yarn dev' builds for development with watch mode enabled for continuous updates.

```bash
yarn build
```

```bash
yarn dev
```

--------------------------------

### Semantic Release Commit Type Mapping

Source: https://github.com/realtimeregister/adac-api-client/blob/master/CONTRIBUTING.md

Illustrates how different commit types are mapped to release types (minor, patch, major) by semantic-release, based on conventional commit standards. This ensures proper versioning and changelog generation.

```text
- `feat:` would be associated with a `minor` release;
- `fix:` would be associated with a `patch` release;
- If `BREAKING CHANGE` is included in the commit message, a `major` release will be triggered;
- etc.
```

--------------------------------

### Conventional Commit Scopes for adac-api-client

Source: https://github.com/realtimeregister/adac-api-client/blob/master/CONTRIBUTING.md

Defines the allowed scopes for commit messages in the adac-api-client project, aligning with conventional commit guidelines. These scopes help categorize changes for automated release management.

```text
- `api` - Changes to API logic, e.g. connections and calls;
- `client` - Changes related to the ADAC client/class;
- none/empty - changes that don't fall under any of the scopes above, typically seen with type `chore` and `refactor`.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.