• Install for a Vue Application
• Install as a Standalone Vue Component

Install for a Vue Application

The easiest way of using the VueAhead auto-complete control in your application is to add and install the package via package managers, e.g. npm or yarn.

At your project root where package.json file is located, run the command below to install and activate the package:

// if use `yarn`
$ yarn add ssh://git@git.its.iastate.edu:7999/wl/webdev-react-typeahead.git

// if use `npm`
$ npm install ssh://git@git.its.iastate.edu:7999/wl/webdev-react-typeahead.git

Then in your application where you intend to use the control, add the following lines:

<template>
<!-- application code -->

<VueAhead 
  :initOptions="food"
  :placeholder="placeholder"
/>

<!-- more application code -->
</template>

<script>
import VueAhead from "vue-ahead";

export default {
  components: {
    // ... other components,
    VueAhead,
  },
  data: function () {
    return {
      food: new Array(
        { key: 0, label: 'Vegetables' },
        { key: 1, label: 'Cheese' },
        { key: 2, label: 'Whatever else humans are supposed to eat' }
      ),
      placeholder: "select your favorite food ... ",
    }
  },
};
</script>

Install as a Standalone Vue Component

Alternatively, you can import the VueJS runtime with the control in a browser, and create a Vue instance to use the control.

For example, the index.html or index.php file below shows the simplest way of importing the control and use it in your application:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- Will need to import the `axios` library if using the `remote` feature -->
<!-- <script src="/path/to/the/library/axios.min.js"></script> -->

<script src="/path/to/the/library/vue-ahead.min.js"></script>

<!-- application code -->

<div id="control">
  <vue-ahead 
    :init-options="food"
    :placeholder="placeholder"
    @selection="handleSelection"
  />
</div>

<!-- more application code -->

<script>
function handleSelection({ type, items }) {
  console.log('selection updates - ', type, items);
};

var control = new Vue({
  el: '#control',
  components: {
    "vue-ahead": vueahead.default,
  },
  data: function () {
    return {
      food: new Array(
        { key: 0, label: 'Vegetables' },
        { key: 1, label: 'Cheese' },
        { key: 2, label: 'Whatever else humans are supposed to eat' }
      ),
      placeholder: "select your favorite food ... ",
    }
  },
});
</script>

WARNING

Note: if using the control as a standalone Vue component in a html file, make sure to convert the control attributes from the camelCase to the kebab-case.

See the official documentation for Prop Casing for more details.