vue-next-typeahead v0.0.2

A simple component to display a typeahead format with Vue3.

Status

Demo

Install

npm install vue-next-typeahead

Quick start

Globally

You can import in your main.js file

import App from './App.vue'
import { createApp } from 'vue'
import VueNextTypeahead from 'vue-next-typeahead'

const app = createApp(App)
app.component(VueNextTypeahead)

Locally in any component

import VueNextTypeahead from 'vue-next-typeahead'

export default {
  components: {
    VueNextTypeahead
  }
};

Basic usage

<template>
    <VueNextTypeahead
      v-model:input="inputSearch"
      :api-url="`http://openlibrary.org/search.json${inputSearch ? `?title=${inputSearch}` : ''}`"
      :title="'Encuentra libros que te gusten'"
      :placeholder="'Busca un libro...'"
      :items="results"
      :key-item="'title'"
      :loading-parent-component="loading"
      @response="getResponse"
      @reset="resetComponent()"
      @hit="selectItem" />
</template>

<script>
  export default {
    data () {
        return {
            results: [],
            loading: false,
            inputSearch: '',
            itemSelected: {}
        }
    },
    methods: {
        async getResponse (responseJson) {
            this.loading = true
            const response = await responseJson.json()
            this.results = response.docs
            this.loading = false
        },

        selectItem (item) {
            this.itemSelected = item
        },

        resetComponent () {
            this.results = []
        }
    }
  };
</script>

Props

Emits

Development

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

git clone https://github.com/cristianpoleyJS/vue-next-typeahead.git
cd vue-next-typeahead
npm install
npm run serve

Commitlint

This project follows the commitlint guidelines, with minor changes.

TODO

• Unit testing with Jest.
• Web Component: Currently Vue3 does not support the generation of a Web Component, that's why I haven't generated it yet.

License

MIT © cristianpoleyJS