Algolia search in vue component

course-finder.js

<template lang="html">
    <div class="shield course-finder">
        <div class="shield__content">
            <svg class="svg-icon" height="40px" width="40px">
            <use xlink:href="/media/svg/sprite.svg#icon-course-finder"></use></svg>
            <h2>Find a course for you</h2>
            <form action="/absolute/patterns/view/search-results" class="" id="" method="get" name="">
                <div class="form__field floating-label">
                    <select id="field-level" name="field-level" required="">
                        <option disabled selected value="">
                            Study level
                        </option>
                        <option value="undergraduate">
                            Undergraduate
                        </option>
                        <option value="postgraduate-research">
                            Postgraduate Research
                        </option>
                        <option value="postgraduate-taught">
                            Postgraduate Taught
                        </option>
                    </select> <label for="field-level">Study level</label>
                </div>
                <div class="form__field floating-label">
                    <input id="field-search" name="field-search" placeholder="Enter a course title or keyword" type="text">
                    <label for="field-search">Keyword Search</label>
                    <button aria-label="search" type="submit"
                        v-on:click="searchSubmit"
                    >
                        <svg class="icon">
                            <use href="/media/svg/sprite.svg#icon-search"></use>
                        </svg>
                    </button>
                </div>
            </form>
            <ul class="list-links">
                <li>
                    <a class=" link-arrow" href="#">Undergraduate A-Z Courses <svg class="icon-arrow" height="16" viewbox=
                    "0 0 16 16" width="16">
                    <path d="M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z"></path></svg></a>
                </li>
                <li>
                    <a class=" link-arrow" href="#">Postgraduate A-Z Courses <svg class="icon-arrow" height="16" viewbox=
                    "0 0 16 16" width="16">
                    <path d="M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z"></path></svg></a>
                </li>
                <li>
                    <a class=" link-arrow" href="#">Book an Open Day <svg class="icon-arrow" height="16" viewbox=
                    "0 0 16 16" width="16">
                    <path d="M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z"></path></svg></a>
                </li>
                <li>
                    <a class=" link-arrow" href="#">International Students <svg class="icon-arrow" height="16" viewbox=
                    "0 0 16 16" width="16">
                    <path d="M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z"></path></svg></a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// Import instantsearch from Algolia
import instantsearch from 'instantsearch.js/dist/instantsearch';

export default {
    data() {
        return {
            iSearch: null
        }
    },

    mounted() {
        this.iSearch = instantsearch({
            appId: 'HT7VYJG3KU',
            apiKey: 'd37bbf3291b226676c9f3f1937e865d3',
            indexName: 'dev_COURSES',
            urlSync: true,
            searchParameters: {
                hitsPerPage: 5, // best to match an option in Pagination array
                attributesToSnippet: [
                    'snippet:35'
                ],
                snippetEllipsisText: '...'
            }
        })
        this.init();
    },

    methods: {

        init() {
            this.iSearch.addWidget(
                instantsearch.widgets.searchBox({
                    container: '#field-search',
                    placeholder: false,
                    magnifier: false,
                })
            );
            this.iSearch.start();
        },

        searchSubmit() {
            const inp = this.$el.querySelector('#field-search').value
            // Set the query and search
            this.iSearch.helper.setQuery(inp).search();
        }
    }
}
</script>