# How to add search in starter-kit

Search has been implemented in the full-version only. If you have started your project using the starter kit as per our suggestion, please follow the below steps to implement search functionality:

Copy the NavSearchBar.vue component file from full-version/src/layouts/components/NavSearchBar.vue and paste the file in the same path in the starter-kit folder.

Now include the NavSearchBar component in DefaultLayoutWithVerticalNav.vue and DefaultLayoutWithHorizontalNav file.

# DefaultLayoutWithVerticalNav.vue | DefaultLayoutWithHorizontalNav.vue
<template #navbar="{ toggleVerticalOverlayNavActive }">
  ....
  <NavSearchBar />
  ... 
</template>

Copy the full-version/src/@fake-db/app-bar-search/index.ts & AppBarSearchType type from the full-version/src/@fake-db/types.d.ts files and paste them into the same paths in the starter-kit folder.

And this is it. Enjoy searching in the template. 🎉🥳

# Customization

We have made our search component easy to customize as per your requirement without touching core components.

# Default Search suggestion

We have provided suggestions prop to provide default search suggestion. You have to provide the suggestion array in below mentioned format.

[
  {
    title:string
    content: [
      icon:string,
      title:string
      url:string
    ]
  }

  ...
]

If you want to modify the default suggestions completely then we suggest to use suggestions slot.

<AppBarSearch>
  <template #suggestions>
     use this slot if you want to override default suggestions completely
  </template>
</AppBarSearch>

# Search List

We have provided search-results prop to render the search list. You have to follow below data formate to render list properly.

[
  { header : string, title : string },    -------> Optional
  {
    id: number
    url: { name:string, params?: object}
    icon: string
    title: string
    category: string
  }

  ...
]

If you want to modify the search list completely then we suggest to use searchResult slot.

<AppBarSearch :search-results="searchResult">
  <template #searchResult="{ item }">
    use this slot to change the search item
  </template>
</AppBarSearch>

# No search data

We have provided no-data-suggestion prop that render the some search suggestions. If you just want to modify the no-data suggestion then please follow the data formate.
```
[
  {
    icon: string
    title: string
    url:  { name: string; params?: object }
  }

  ...
]
```

You can also modify the no-data section completely using the noData slot.

<AppBarSearch>
  <template #noData>
    use this slot to change the view of no data section
  </template>s
</AppBarSearch>