### Install and Start Example

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/web/examples/VectorSearch/README.md

Install project dependencies and start the development server for the vector search example.

```bash
# Install dependencies
npm install

# Start the development server
npm start
```

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

### Install Dependencies and Run Development Server

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/vector-search/README.md

Install project dependencies using npm and start the development server.

```bash
npm install

npm run dev
```

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

### Install Dependencies

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-nuxt-typescript/README.md

Install project dependencies using yarn, npm, or pnpm.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install
```

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

### Start Development Server

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-ssr/README.md

Starts the Nuxt 3 development server on http://localhost:3000.

```bash
npm run dev
```

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

### Install ReactiveSearch

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/web/README.md

Install the ReactiveSearch package using yarn.

```bash
yarn add @appbaseio/reactivesearch
```

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

### Start Development Server

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/reactive-google-map/README.md

Compiles the project and starts a hot-reloading development server. Ideal for active development and testing changes in real-time.

```bash
yarn serve
```

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

### Install Dependencies with pnpm

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-ssr/README.md

Installs project dependencies using pnpm.

```bash
pnpm install
```

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

### Install ReactiveSearch

Source: https://github.com/appbaseio/reactivesearch/blob/next/README.md

Install ReactiveSearch using npm. This is the first step for integrating the library into your project.

```bash
npm i @appbaseio/reactivesearch
```

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

### Install ReactiveSearch for React

Source: https://github.com/appbaseio/reactivesearch/blob/next/README.md

Use this command to install the ReactiveSearch library for React projects.

```javascript
npm install @appbaseio/reactivesearch
```

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

### Install Dependencies

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/analytics-with-hook/README.md

Installs project dependencies using Yarn. Run this command after cloning the repository.

```bash
yarn install
```

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

### Install Dependencies with npm

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-ssr/README.md

Installs project dependencies using npm.

```bash
npm install
```

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

### Install ReactiveMaps Native

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/maps-native/README.md

Install the ReactiveMaps Native package using npm. This library requires ReactiveSearch to be installed as well.

```bash
npm install @appbaseio/reactivesearch-native
```

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

### ReactiveBase Component Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/ReactiveBase/index.jsx.html

This snippet shows the basic import and setup for the ReactiveBase component, including necessary dependencies from '@appbaseio/reactivecore' and 'vue-types'.

```javascript
import configureStore from '@appbaseio/reactivecore';
import { isEqual } from '@appbaseio/reactivecore/lib/utils/helper';
import { updateAnalyticsConfig } from '@appbaseio/reactivecore/lib/actions/analytics';
import VueTypes from 'vue-types';
import Appbase from 'appbase-js';
import 'url-search-params-polyfill';

import Provider from '../Provider';
import { composeThemeObject, X_SEARCH_CLIENT } from '../../utils/index';
import types from '../../utils/vueTypes';
import URLParamsProvider from '../URLParamsProvider.jsx';
import getTheme from '../../styles/theme';

const ReactiveBase = {
	name: 'ReactiveBase',
	data() {
		this.state = {
			key: '__REACTIVE_BASE__',
		};
		return this.state;
	},
	created() {
		this.setStore(this.$props);
	},
	mounted() {
		const { analyticsConfig } = this;
		// TODO: Remove in 2.0
		if (analyticsConfig !== undefined) {
			console.warn(
				'Warning(ReactiveSearch): The `analyticsConfig` prop has been marked as deprecated, please use the `appbaseConfig` prop instead.',
			);
		}
	},
	props: {
		app: types.string,
		analytics: VueTypes.bool,
		analyticsConfig: types.analyticsConfig,
```

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

### Start Development Server

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/web/examples/DateRange/README.md

Runs the app in development mode with hot-reloading. Opens the app at http://localhost:3000.

```bash
npm start
```

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

### Install ReactiveSearch for Vue

Source: https://github.com/appbaseio/reactivesearch/blob/next/README.md

Use this command to install the ReactiveSearch library for Vue projects.

```javascript
npm install @appbaseio/reactivesearch-vue
```

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

### Install ReactiveSearch Vue

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/README.md

Install the ReactiveSearch Vue package using Yarn.

```bash
yarn add @appbaseio/reactivesearch-vue
```

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

### MultiDropdownList Component Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/MultiDropdownList.jsx.html

Basic setup for the MultiDropdownList component, including necessary imports from reactivesearch and vue.

```javascript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import VueTypes from 'vue-types';
import types from '../../utils/vueTypes';
import { getAggsQuery } from './utils';
import Title from '../../styles/Title';
import Container from '../../styles/Container';
import ComponentWrapper from '../basic/ComponentWrapper.jsx';
import Button, { loadMoreContainer } from '../../styles/Button';
import Dropdown from '../shared/DropDown.jsx';
import {
	connect,
	hasCustomRenderer,
	getComponent,
	isFunction,
	parseValueArray,
	updateCustomQuery,
	updateDefaultQuery,
	isQueryIdentical,
} from '../../utils/index';

const { updateQuery, setQueryOptions, setCustomQuery, setDefaultQuery } = Actions;
const { isEqual, getQueryOptions, checkValueChange, checkPropChange, getClassName }
```

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

### Install Dependencies and Run Nuxt.js App

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/reactive-google-map-nuxt/README.md

Commands to install project dependencies, run the Nuxt.js development server with hot reload, build the application for production, and generate a static version.

```bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate
```

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

### Vue Component Installation

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/RangeInput.jsx.html

Provides a Vue install method for the RangeInput component, registering it with Vue.

```javascript
RangeInput.install = function(Vue) {
	Vue.component(RangeInput.name, RangeConnected);
};

```

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

### Vue Plugin Installation for SingleList

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleList.jsx.html

Provides an install method for Vue.js to register the connected SingleList component globally.

```javascript
SingleList.install = function (Vue) {
	Vue.component(SingleList.name, ListConnected);
};
```

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

### Vue.js Installation for MultiDropdownList

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/MultiDropdownList.jsx.html

Provides the installation method for the MultiDropdownList component in a Vue.js application, registering it globally.

```javascript
MultiDropdownList.install = function (Vue) {
	Vue.component(MultiDropdownList.name, ListConnected);
};

```

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

### Install Reactivemaps and Reactivesearch

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/maps/README.md

Install both Reactivemaps and Reactivesearch libraries using yarn. These are required to build map-based UIs with Elasticsearch.

```bash
yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch
```

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

### Event Listeners Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/basic/DownShift.jsx.html

Sets up global mousedown and mouseup event listeners on component mount and removes them before destruction.

```javascript
mounted() {
		window.addEventListener('mousedown', this.handleWindowMousedown);
		window.addEventListener('mouseup', this.handleWindowMouseup);
	},
	beforeDestroy() {
		window.removeEventListener('mousedown', this.handleWindowMousedown);
		window.removeEventListener('mouseup', this.handleWindowMouseup);
	},
```

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

### SingleList Component Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleList.jsx.html

Basic setup for the SingleList component, including necessary imports and prop definitions. This component is used for single selection filtering.

```javascript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
import VueTypes from 'vue-types';
import Title from '../../styles/Title';
import Input from '../../styles/Input';
import Container from '../../styles/Container';
import {
	connect,
	getComponent,
	hasCustomRenderer,
	isEvent,
	isFunction,
	updateCustomQuery,
	updateDefaultQuery,
	isQueryIdentical,
} from '../../utils/index';
import ComponentWrapper from '../basic/ComponentWrapper.jsx';
import types from '../../utils/vueTypes';
import { UL, Radio } from '../../styles/FormControlList';
import { getAggsQuery } from './utils';

const { updateQuery, setQueryOptions, setCustomQuery, setDefaultQuery } = Actions;
const { 
	getQueryOptions,
	checkValueChange,
	getClassName,
	isEqual,
	extractQueryFromCustomQuery,
	getOptionsForCustomQuery,
} = helper;

const SingleList = {
	name: 'SingleList',
	props: {
		beforeValueChange: types.func,
		className: VueTypes.string.def(''),
		componentId: types.stringRequired,
		customQuery: types.func,
		dataField: types.stringRequired,
		defaultValue: types.string,
		value: types.value,
		defaultQuery: types.func,
		filterLabel: types.string,
		innerClass: types.style,
		placeholder: VueTypes.string.def('Search'),
		react: types.react,
		render: types.func,
		renderItem: types.func,
		renderNoResults: VueTypes.any,
		transformData: types.func,
		selectAllLabel: types.string,
		showCount: VueTypes.bool.def(true),

```

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

### Install SingleDropdownList in Vue

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleDropdownList.jsx.html

Provides instructions for installing the SingleDropdownList component as a Vue plugin. This allows the component to be registered globally within a Vue application.

```javascript
SingleDropdownList.install = function (Vue) {
	Vue.component(SingleDropdownList.name, ListConnected);
};

```

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

### Install DynamicRangeSlider Component in Vue

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/DynamicRangeSlider.jsx.html

Provides a method to install the DynamicRangeSlider component as a Vue plugin, making it globally available.

```javascript
DynamicRangeSlider.install = function (Vue) {
	Vue.component(DynamicRangeSlider.name, RangeConnected);
};
```

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

### ResultCard Vue Plugin Installation

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ResultCard.jsx.html

Provides an install method for the ResultCard component, allowing it to be registered globally with Vue. It also registers its associated addon components.

```javascript
ResultCard.install = function(Vue) {
	Vue.component(ResultCard.name, ResultCard);
	Vue.component(ResultCardTitle.name, ResultCardTitle);
	Vue.component(ResultCardImage.name, ResultCardImage);
	Vue.component(ResultCardDescription.name, ResultCardDescription);
};

```

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

### Component Registration and Listener Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/basic/ComponentWrapper.jsx.html

Registers a component if it's set to destroy on unmount or not present in the store. It also sets up query change and error listeners, and updates component props in the store.

```javascript
// Register a component only when 
// destroyOnUnmount is 
// or component is not present in store
if (this.destroyOnUnmount || components.indexOf(this.componentProps.componentId) === -1) {
	// Register  component
	this.addComponent(this.componentId);
	const onQueryChange = (...args) => {
		this.$emit('queryChange', ...args);
		this.$emit('query-change', ...args);
	};
	const onError = (e) => {
		this.$emit('error', e);
	};
	this.setQueryListener(this.componentId, onQueryChange, onError);
	// Update props in store
	this.setComponentProps(this.componentId, this.componentProps, options.componentType);
}
```

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

### URLParamsProvider Component Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/URLParamsProvider.jsx.html

Defines the URLParamsProvider component with its props for className, headers, search param handlers, and render as type. It also includes lifecycle methods like mounted for initialization.

```javascript
import { Actions, helper } from '@appbaseio/reactivecore';
import VueTypes from 'vue-types';
import { connect } from '../utils/index';
import types from '../utils/vueTypes';
import Base from '../styles/Base';

const { setHeaders, setValue } = Actions;
const { isEqual } = helper;

const URLParamsProvider = {
	name: 'URLParamsProvider',
	props: {
		className: types.string,
		headers: types.headers,
		getSearchParams: types.func,
		setSearchParams: types.func,
		as: VueTypes.string.def('div'),
	},
	mounted() {
		this.init();

		window.onpopstate = () => {
			this.init();
			const activeComponents = Array.from(this.params.keys());

			// remove inactive components from selectedValues
			Object.keys(this.currentSelectedState)
				.filter(item => !activeComponents.includes(item))
				.forEach(component => {
					this.setValue(component, null);
				});

			// update active components in selectedValues
			Array.from(this.params.entries()).forEach(item => {
				try {
					const [component, value] = item;
					const { label, showFilter, URLParams } = this.selectedValues[component] || {
						label: component,
					};

```

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

### Mounted Hook for Initial Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ReactiveList.jsx.html

The `mounted` hook initializes the component's state. It sets the page URL if needed, retrieves query options, applies sorting based on props or sort options, and sets the initial query and query options, including handling default queries.

```javascript
	mounted() {
		Iif (this.defaultPage < 0 && this.currentPage > 0) {
			this.setPageURL(
				this.$props.componentId,
				this.currentPage,
				this.$props.componentId,
				false,
				this.URLParams,
			);
		}
		let options = getQueryOptions(this.$props);
		options.from = this.$data.from;
		
		Iif (this.sortOptions && this.sortOptions\[this.sortOptionIndex\]) {
			const sortField = this.sortOptions\[this.sortOptionIndex\].dataField;
			const { sortBy } = this.sortOptions\[this.sortOptionIndex\];
			options.sort = [
				{
					\[sortField\]: {
						order: sortBy,
					},
				},
			];
			// To handle sort options for RS API
			this.updateComponentProps(
				this.componentId,
				{ dataField: sortField, sortBy },
				componentTypes.reactiveList,
			);
		} else Iif (this.$props.sortBy) {
			options.sort = [
				{
					\[this.$props.dataField\]: {
						order: this.$props.sortBy,
					},
				},
			];
		} // Override sort query with defaultQuery's sort if defined
		
		this.$defaultQuery = null;
		
		Iif (this.$props.defaultQuery) {
			this.$defaultQuery = this.$props.defaultQuery();
			options = { ...options, ...getOptionsForCustomQuery(this.$defaultQuery) };
			
			// Update calculated default query in store
			updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props);
		}
		// execute is set to false at the time of mount
		const query = extractQueryFromCustomQuery(this.$defaultQuery);
		
		const execute = false;
		this.setQueryOptions(
			this.$props.componentId,
			{ ...options, ...this.getAggsQuery() },
			execute,
		);
		
		Iif (this.$defaultQuery) {
			this.updateQuery(
				{
					componentId: this.internalComponent,
					query,
				},
			execute,
			);
		} else {
			this.updateQuery(
				{
					componentId: this.internalComponent,

```

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

### Get Theme Function

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/styles/theme.js.html

Returns the appropriate theme object (light or dark) based on the provided preset string. Defaults to dark theme if 'light' is not specified.

```javascript
export default function getTheme(preset) {
	Eif (preset === 'light') {
		return light;
	}
	return dark;
}

```

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

### ReactiveList Installation and Registration

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ReactiveList.jsx.html

Defines how the ReactiveList component is installed and registered within a Vue.js application. It also sets the component type for server-side rendering purposes.

```javascript
ReactiveList.install = function (Vue) {
	Vue.component(ReactiveList.name, RLConnected);
	Vue.component(ResultListWrapper.name, ResultListWrapper);
	Vue.component(ResultCardsWrapper.name, ResultCardsWrapper);
};
// Add componentType for SSR
ReactiveList.componentType = componentTypes.reactiveList;

export default ReactiveList;
```

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

### Vue Component Registration for MultiList

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/MultiList.jsx.html

Installs the MultiList component for use in a Vue application by registering it with Vue's global component registry.

```javascript
MultiList.install = function (Vue) {
	Vue.component(MultiList.name, ListConnected);
};

```

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

### ReactiveList Component Initialization Logic

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ReactiveList.jsx.html

Handles initial state setup, including default page calculation, pagination warnings, and deprecated prop warnings for aggregationField and distinctField. It also sets up component properties for internal state management and default sort option selection.

```javascript
data() {
		let currentPageState = 0;
		const defaultPage = this.defaultPage || -1;
		Iif (defaultPage >= 0) {
			currentPageState = defaultPage;
		} else Iif (this.currentPage) {
			currentPageState = Math.max(this.currentPage - 1, 0);
		}
		
		this.__state = {
			from: currentPageState * this.size,
			currentPageState,
		};
		return this.__state;
	},
	created() {
		const { distinctField, distinctFieldConfig, index } = this.$props;
		// no support for pagination and aggregationField together
		Iif (this.pagination && this.aggregationField) {
			console.warn(
				'Pagination is not supported when aggregationField is present. The list will be rendered with infinite scroll',
			);
		}
		Iif (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
			console.warn(
				'Warning(ReactiveSearch): The \`aggregationField\` prop has been marked as deprecated, please use the \`distinctField\` prop instead.',
			);
		}
		Iif (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
			console.warn(
				'Warning(ReactiveSearch): In order to use the \`distinctField\` and \`distinctFieldConfig\` props, the \`enableAppbase\` prop must be set to true in \`ReactiveBase\`.',
			);
		}
		Iif (!this.enableAppbase && index) {
			console.warn(
				'Warning(ReactiveSearch): In order to use the \`index\` prop, the \`enableAppbase\` prop must be set to true in \`ReactiveBase\`.',
			);
		}
		const defaultPage = this.defaultPage || -1;
		Iif (defaultPage >= 0) {
			this.currentPageState = defaultPage;
			this.from = this.currentPageState * this.$props.size;
		}
		this.internalComponent = `${this.$props.componentId}__internal`;
		this.sortOptionIndex = 0;
		Iif (this.defaultSortOption && this.sortOptions && Array.isArray(this.sortOptions)) {
			this.sortOptionIndex = this.sortOptions.findIndex(
				(s) => s.label === this.defaultSortOption,
			);
		}
		Iif (this.urlSortOption) {
			this.sortOptionIndex
				= this.$props.sortOptions.findIndex((s) => s.label === this.urlSortOption) || 0;
		}
		this.updateComponentProps(
			this.componentId,
			{ from: this.from },
			componentTypes.reactiveList,
		);
		this.updateComponentProps(
			this.internalComponent,
			{ from: this.from },
			componentTypes.reactiveList,
		);
	},
```

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

### ReactiveBase Component Setup

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/ReactiveBase/index.jsx.html

Defines the ReactiveBase component's props, provide, watch, computed properties, methods, and render function. This is the main component for initializing ReactiveSearch in a Vue application.

```javascript
export default {
	name: 'ReactiveBase',
	props: {
		app: types.string,
		config: types.props,
		transformRequest: types.func,
		transformResponse: types.func,
		getSearchParams: types.func,
		setSearchParams: types.func,
		url: types.string,
		credentials: types.string,
		headers: types.headers,
		queryParams: types.string,
		analytics: types.bool.def(true),
		analyticsConfig: types.props,
		appbaseConfig: types.appbaseConfig,
		enableAppbase: VueTypes.bool.def(false),
		theme: VueTypes.object.def({}),
		themePreset: VueTypes.string.def('light'),
		type: types.string,
		mapKey: types.string,
		initialQueriesSyncTime: types.number,
		className: types.string,
		initialState: VueTypes.object.def({}),
		as: VueTypes.string.def('div'),
		mongodb: types.mongodb,
	},
	provide() {
		return {
			theme_reactivesearch: composeThemeObject(
				getTheme(this.$props.themePreset),
				this.$props.theme,
			),
			store: this.store,
		};
	},
	watch: {
		app() {
			this.updateState(this.$props);
		},
		url() {
			this.updateState(this.$props);
		},
		type() {
			this.updateState(this.$props);
		},
		credentials() {
			this.updateState(this.$props);
		},
		mapKey() {
			this.updateState(this.$props);
		},
		headers() {
			this.updateState(this.$props);
		},
		analyticsConfig(newVal, oldVal) {
			if (!isEqual(newVal, oldVal)) {
				if (this.store) {
					this.store.dispatch(updateAnalyticsConfig(newVal));
				}
			}
		},
		appbaseConfig(newVal, oldVal) {
			if (!isEqual(newVal, oldVal)) {
				if (this.store) {
					this.store.dispatch(updateAnalyticsConfig(newVal));
				}
			}
		},
		mongodb() {
			this.updateState(this.$props);
		},
	},
	computed: {
		getHeaders() {
			const { enableAppbase, headers, appbaseConfig, mongodb } = this.$props;
			const { enableTelemetry } = appbaseConfig || {};
			return {
				...(enableAppbase
					&& !mongodb && {
					'X-Search-Client': X_SEARCH_CLIENT,
					...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
				}),
				...headers,
			};
		},
	},
	methods: {
		updateState(props) {
			this.setStore(props);
			this.key = `${this.state.key}-0`;
		},
		setStore(props) {
			const credentials
				= props.url && props.url.trim() !== '' && !props.credentials
					? null
					: props.credentials;
			const appbaseConfig = {
				...props.analyticsConfig,
				...props.appbaseConfig,
			};
			const config = {
				url: props.url && props.url.trim() !== '' ? props.url : '',
				app: props.app,
				credentials,
				type: props.type ? props.type : '*',
				transformRequest: props.transformRequest,
				transformResponse: props.transformResponse,
				enableAppbase: props.enableAppbase,
				analytics: props.appbaseConfig
					? props.appbaseConfig.recordAnalytics
					: props.analytics,
				analyticsConfig: appbaseConfig,
				mongodb: props.mongodb,
			};
			let queryParams = '';
 
			Eif (typeof window !== 'undefined') {
				queryParams = window.location.search;
			} else {
				queryParams = props.queryParams || '';
			}
 
			const params = new URLSearchParams(queryParams);
			let selectedValues = {};
			let urlValues = {};
 
			Array.from(params.keys()).forEach((key) => {
				try {
					const parsedParams = JSON.parse(params.get(key));
					const selectedValue = {};
					if (parsedParams.value) {
						selectedValue.value = parsedParams.value;
					} else {
						selectedValue.value = parsedParams;
					}
					if (parsedParams.category) selectedValue.category = parsedParams.category;
					selectedValue.reference = 'URL';
					selectedValues = {
						...selectedValues,
						[key]: selectedValue,
					};
					urlValues = {
						...urlValues,
						[key]: selectedValue.value,
					};
				} catch (e) {
					// Do not add to selectedValues if JSON parsing fails.
				}
			});
 
			const { themePreset } = props;
 
			const appbaseRef = Appbase(config);
 
			Iif (this.$props.transformRequest) {
				appbaseRef.transformRequest = this.$props.transformRequest;
			}
 
			Iif (this.$props.transformResponse) {
				appbaseRef.transformResponse = this.$props.transformResponse;
			}
 
			const initialState = {
				config: {
					...config,
					initialQueriesSyncTime: props.initialQueriesSyncTime,
					initialTimestamp: new Date().getTime(),
					mapKey: props.mapKey,
					themePreset,
				},
				appbaseRef,
				selectedValues,
				urlValues,
				headers: this.getHeaders,
				...this.$props.initialState,
			};
			this.store = configureStore(initialState);
		},
	},
	render() {
		const children = this.$slots.default;
		const { style, className } = this.$props;
		return (
			<Provider store={this.store}>
				<URLParamsProvider
					as={this.$props.as}
					headers={this.getHeaders}
					style={style}
					className={className}
					getSearchParams={this.getSearchParams}
					setSearchParams={this.setSearchParams}
				>
					{children}
				</URLParamsProvider>
			</Provider>
		);
	},
};
ReactiveBase.install = function (Vue) {
	Vue.component(ReactiveBase.name, ReactiveBase);
};
 
export default ReactiveBase;
```

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

### Get Component Data for Rendering

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/MultiList.jsx.html

Prepares the data object required by the generic getComponent function for rendering the MultiList UI. It includes error, loading, value, data, and event handlers.

```javascript
getComponent() {
			const { currentValue, modifiedOptions } = this.$data;
			const { transformData } = this.$props;
			let itemsToRender = modifiedOptions;
			Iif (transformData) {
				itemsToRender = transformData(itemsToRender);
			}
			const data = {
				error: this.error,
				loading: this.isLoading,
				value: currentValue,
				data: itemsToRender,
				rawData: this.rawData,
				handleChange: this.handleClick,
			};
			return getComponent(data, this);
		}
```

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

### Vue SingleList Component Created Hook

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleList.jsx.html

Handles initial setup in the `created` lifecycle hook. It checks for the `enableAppbase` prop when the `index` prop is used, warns if it's missing, and processes the initial `options` to populate `modifiedOptions`. It also sets up custom and default queries in the store.

```javascript
created() {
  Iif (!this.enableAppbase && this.$props.index) {
    console.warn(
      'Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.'
    );
  }
  const props = this.$props;
  this.modifiedOptions
    = this.options && this.options[props.dataField]
      ? this.options[props.dataField].buckets
      : [];
  // Set custom and default queries in store
  updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
  updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.currentValue);
}
```

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

### Initialize Component and Handle Value

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/DynamicRangeSlider.jsx.html

Sets up the component by adding it to the store, handling initial values, and setting default values based on props or parsed values. It also handles mock data for testing.

```javascript
beforeMount() {
		let components = [];
		Eif (this.$$store) {
			({ components } = this.$$store.getState());
		}
		const { value } = this.$props;
		Eif (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
			this.addComponent(this.componentId);
			this.addComponent(this.internalRangeComponent);
			Iif (Array.isArray(this.selectedValue)) {
				this.handleChange(this.selectedValue);
			} else Iif (this.selectedValue) {
				this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
			} else Iif (value) {
				this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
			}
			Eif (this.$props.mockData) {
				this.mockDataForTesting(
					this.internalRangeComponent,
					this.$props.mockData[this.internalRangeComponent],
				);
				this.setDefaultValue({
					start: this.$props.mockData[this.internalRangeComponent].aggregations.min.value,
					end: this.$props.mockData[this.internalRangeComponent].aggregations.max.value,
				});
			} else {
				// get range before executing other queries
				this.updateRangeQueryOptions();
			}
		}
	}
```

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

### Build for Production

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/analytics-with-hook/README.md

Compiles and minifies the application for production deployment. This command prepares the project for a production environment.

```bash
yarn run build
```

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

### Initializing Component State and URL Parameters

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/URLParamsProvider.jsx.html

The `init` method sets up the initial state of the component by fetching the current search string from the URL and parsing it into URLSearchParams.

```javascript
    init() {
      this.searchString = this.$props.getSearchParams
        ? this.$props.getSearchParams()
        : window.location.search;
      this.params = new URLSearchParams(this.searchString);
      this.currentSelectedState = this.selectedValues || {};
    },
```

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

### Preview Production Build

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-ssr/README.md

Locally previews the production build of the Nuxt 3 application.

```bash
npm run preview
```

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

### Build for Production

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/reactive-google-map/README.md

Compiles and minifies the project for production deployment. Generates optimized static assets.

```bash
yarn build
```

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

### Run Development Server

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/analytics-with-hook/README.md

Compiles and hot-reloads the application for development. Use this for local development and testing.

```bash
yarn run serve
```

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

### Build for Production

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/with-ssr/README.md

Builds the Nuxt 3 application for production deployment.

```bash
npm run build
```

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

### Get Query Suggestions Component

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/utils/index.js.html

Extracts and returns a renderable JSX element for query suggestions, prioritizing 'renderPopularSuggestions' from props or slots.

```javascript
export const getQuerySuggestionsComponent = (data = {}, _ref = {}) => {
	const { renderQuerySuggestions, renderPopularSuggestions } = _ref.$scopedSlots || _ref.$props;
	const render = renderPopularSuggestions || renderQuerySuggestions;
	if (render) return render(data);
	return null;
};
```

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

### ResultCardDescription Vue Component

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/addons/ResultCardDescription.jsx.html

Defines a functional Vue component named ResultCardDescription. It includes a render function and an install method for global registration.

```javascript
const ResultCardDescription = {
	name: 'ResultCardDescription',
	functional: true,
	render(\, { props, children }) {
		return <article {...props}>{children}</article>;
	},
};
ResultCardDescription.install = function(Vue) {
	Vue.component(ResultCardDescription.name, ResultCardDescription);
};
export default ResultCardDescription;
```

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

### RangeInput Component JSX Structure

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/RangeInput.jsx.html

Renders the RangeInput component, including nested input fields for start and end values, with validation alerts.

```jsx
return (
			<Container
				class={getClassName(innerClass, 'container') || ''}
				themePreset={themePreset}
				customStyle={customStyle}
			>
				<RangeSlider
					sliderOptions={sliderOptions}
				nestedField={nestedField}
				on-change={this.handleOnChange}
				on-value-change={this.handleValueChange}
				mode={this.$attrs.mode}
			/>
				<Flex class={getClassName(innerClass, 'input-container') || ''}>
					<Flex direction="column" flex={2}>
						<Input
							key={`${componentId}-start-value`}
							name="start"
							type="number"
							onChange={this.handleInputChange}
							step={stepValue}
							themePreset={themePreset}
							aria-label={`${componentId}-start-input`}
							min={this.$props.range ? this.$props.range.start : 0}
							class={getClassName(innerClass, 'input') || ''}
							alert={!this.isStartValid}
							value={this.currentValue.start}
							{...{
								domProps: {
									value: this.currentValue.start,
								},
							}}
						/>
						{!this.isStartValid && <Content alert>Input range is invalid</Content>}
					</Flex>
					<Flex justifyContent="center" alignItems="center" flex={1}>
						-
					</Flex>
					<Flex direction="column" flex={2}>
						<Input
							key={`${componentId}-end-value`}
							name="end"
							type="number"
							onChange={this.handleInputChange}
							step={stepValue}
							themePreset={themePreset}
							aria-label={`${componentId}-end-input`}
							max={this.$props.range ? this.$props.range.end : 10}
							class={getClassName(innerClass, 'input') || ''}
							alert={!this.isEndValid}
							value={this.currentValue.end}
							{...{
								domProps: {
									value: this.currentValue.end,
								},
							}}
						/>
						{!this.isEndValid && <Content alert>Input range is invalid</Content>}
					</Flex>
				</Flex>
			</Container>
		);
	},
};

```

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

### Getting Component Data for SingleList

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleList.jsx.html

Retrieves and potentially transforms the data items to be rendered in the SingleList component. It applies a 'transformData' function if provided.

```javascript
getComponent() {
			const { currentValue, modifiedOptions } = this.$data;
			const { transformData } = this.$props;
			let itemsToRender = modifiedOptions;
			Iif (transformData) {
				itemsToRender = transformData(itemsToRender);
			}
			// ... rest of the component logic
```

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

### Get Render Function from Props or Slot

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/utils/index.js.html

Retrieves a render function from either scoped slots or props. Returns the render function if found, otherwise null.

```javascript
export const getComponent = (data = {}, _ref = {}) => {
	const { render: renderScope } = _ref.$scopedSlots || {};
	const { render: renderProp } = _ref.$props || {};
	const render = renderScope || renderProp;
	if (render) return render(data);
	return null;
};
```

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

### Get Valid Prop Keys

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/utils/index.js.html

Filters an object's keys to include only those present in a predefined list of valid props. Useful for prop validation or passing props down.

```javascript
export const getValidPropsKeys = (props = {}) =>
	Object.keys(props).filter(i => validProps.includes(i));
```

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

### Configure Reactivity

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/DynamicRangeSlider.jsx.html

Sets up the reactive dependencies for the component. It watches other components specified in the 'react' prop or uses an empty object if 'react' is not provided.

```javascript
setReact() {
			if (this.$props.react) {
				this.watchComponent(this.internalRangeComponent, this.$props.react);
				this.watchComponent(this.$props.componentId, this.$props.react);
			} else {
				this.watchComponent(this.internalRangeComponent, {});
				this.watchComponent(this.$props.componentId, {});
			}
		}
```

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

### Hotjar Initialization Script

Source: https://github.com/appbaseio/reactivesearch/blob/next/site/index.html

Asynchronously loads the Hotjar tracking script. This script is responsible for integrating Hotjar's features into your website.

```javascript
(function(h, o, t, j, a, r) {
  h.hj = h.hj || function() {
    (h.hj.q = h.hj.q || []).push(arguments);
  };
  h._hjSettings = {
    hjid: 22389,
    hjsv: 6,
  };
  a = o.getElementsByTagName('head')[0];
  r = o.createElement('script');
  r.async = 1;
  r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
  a.appendChild(r);
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
```

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

### Get Item Props for Rendering

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/basic/DownShift.jsx.html

Generates props for individual items, ensuring they are added to the internal `items` array if not already present. It determines the correct index for the item.

```javascript
getItemProps({ index, item }) {
			let newIndex = index;
			Eif (index === undefined) {
				Iif (this.$props.itemToString) {
					this.items.push(this.$props.itemToString(item));
				} else {
					this.items.push(item);
				}
				newIndex = this.items.indexOf(item);
			} else {
				this.items[newIndex] = item;
			}
		}
```

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

### Run Tests

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/examples/analytics-with-hook/README.md

Executes the project's test suite. Ensure all tests pass before making significant changes or deploying.

```bash
yarn run test
```

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

### Handle Range Changes

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/range/DynamicRangeSlider.jsx.html

Manages updates when the range of the slider changes. It ensures that the new start and end values are correctly applied, especially when only one end of the range has shifted.

```javascript
range(newValue, oldValue) {
  if (isEqual(newValue, oldValue) || !this.currentValue) return;

  const [currentStart, currentEnd] = this.currentValue || [];
  const { start: oldStart, end: oldEnd } = oldValue || {};

  const newStart = currentStart === oldStart ? newValue.start : currentStart;
  const newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;

  this.handleChange([newStart, newEnd]);
}
```

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

### Reset Cache for React Native App

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/maps-native/README.md

Use these commands to reset the watchman watch and start the React Native packager with a cleared cache. This is useful for resolving dependency warnings.

```bash
watchman watch-del-all
yarn start --reset-cache
```

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

### Enable ReactiveSearch API (v3)

Source: https://github.com/appbaseio/reactivesearch/blob/next/README.md

For ReactiveSearch v3, enable the ReactiveSearch API by setting the `enableAppbase` prop to `true` in the `ReactiveBase` component. This is required when using appbase.io as your backend.

```jsx
<ReactiveBase enableAppbase={true} ...>
  ...
</ReactiveBase>
```

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

### ReactiveList Component Structure

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ReactiveList.jsx.html

Basic structure of the ReactiveList component, including imports and core setup. This component is used to display search results and supports various customization options.

```javascript
import { Actions, helper } from '@appbaseio/reactivecore';
import VueTypes from 'vue-types';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import { withClickIds } from '@appbaseio/reactivecore/lib/utils/helper';
import Pagination from './addons/Pagination.jsx';
import PoweredBy from './addons/PoweredBy.jsx';
import ComponentWrapper from '../basic/ComponentWrapper.jsx';
import ResultListWrapper from './addons/ResultListWrapper.jsx';
import ResultCardsWrapper from './addons/ResultCardsWrapper.jsx';
import {
	connect,
	isFunction,
	hasCustomRenderer,
	getComponent,
	updateDefaultQuery,
	isQueryIdentical,
} from '../../utils/index';
import Flex from '../../styles/Flex';
import types from '../../utils/vueTypes';
import { resultStats, sortOptions } from '../../styles/results';
import ImpressionTracker from './addons/ImpressionTracker.jsx';

const {
	setQueryOptions,
	updateQuery,
	loadMore,
	setValue,
	updateComponentProps,
	setDefaultQuery,
	recordResultClick,
} = Actions;

const {
	isEqual,
	getQueryOptions,
	getClassName,
	parseHits,
	getCompositeAggsQuery,
	getResultStats,
	extractQueryFromCustomQuery,
	getOptionsForCustomQuery,
} = helper;

const ReactiveList = {
	name: 'ReactiveList',
	components: {
		ResultListWrapper,

```

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

### Run Tests

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/web/examples/DateRange/README.md

Launches the test runner in interactive watch mode. See the documentation for more information on running tests.

```bash
npm test
```

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

### ReactiveList Get Aggs Query Method

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/result/ReactiveList.jsx.html

Constructs the aggregation query part based on the aggregationField and afterKey props. It sets the size for aggregations and includes composite aggregation logic.

```javascript
getAggsQuery() {
			const { size, aggregationField } = this.$props;
			const { afterKey } = this.$data;
			const queryOptions = { size };
			Iif (aggregationField) {
				queryOptions.aggs = getCompositeAggsQuery({
					props: this.$props,
					after: afterKey || null,
					showTopHits: true,
				}).aggs;
			}
			return queryOptions;
		}
```

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

### Get Character from Char Code

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/utils/index.js.html

Converts a character code (potentially from an event's `which` or `keyCode`) into its corresponding character. Handles differences between ASCII and scan codes for certain keys.

```javascript
export function getCharFromCharCode(passedCharCode) {
	const which = passedCharCode;
	const chrCode = which - 48 * Math.floor(which / 48);
	return String.fromCharCode(which >= 96 ? chrCode : which);
}
```

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

### Connect SingleDropdownList to Redux

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleDropdownList.jsx.html

Maps Redux state and dispatch actions to the SingleDropdownList component's props. This setup is crucial for managing component state and interactions within the Reactivesearch ecosystem.

```javascript
const mapStateToProps = (state) => ({
		aggregations: state.aggregations[props.componentId] || {},
		rawData: state.rawData[props.componentId],
		isLoading: state.isLoading[props.componentId],
		selectedValue:
			(state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value) ||
			'',
		themePreset: state.config.themePreset,
		error: state.error[props.componentId],
		componentProps: state.props[props.componentId],
		enableAppbase: state.config.enableAppbase,
});

const mapDispatchtoProps = {
	setQueryOptions,
	updateQuery,
	setCustomQuery,
	setDefaultQuery,
};

export const ListConnected = ComponentWrapper(
	connect(mapStateToProps, mapDispatchtoProps)(SingleDropdownList),
	{
		componentType: componentTypes.singleDropdownList,
		internalComponent: SingleDropdownList.hasInternalComponent(),
	},
);

```

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

### Importing CSS and styled from emotion

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/styles/Content.js.html

Imports the necessary functions for CSS-in-JS styling from the 'emotion' and '@appbaseio/vue-emotion' libraries.

```javascript
import { css } from 'emotion';
import styled from '@appbaseio/vue-emotion';
```

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

### handleLoadMore Method

Source: https://github.com/appbaseio/reactivesearch/blob/next/packages/vue/coverage/lcov-report/components/list/SingleDropdownList.jsx.html

Triggers the loading of more items by updating the query options with the 'after' key.

```javascript
handleLoadMore() {
			this.updateQueryOptions(this.$props, true);
		}
```