Install with npm or yarn
npm install @todovue/tv-searchyarn add @todovue/tv-searchImport
import TvSearch from '@todovue/tv-search'You can also import it directly in the main.js file, so you don't have to import it in the pages
import { createApp } from "vue";
import App from "./App.vue";
import TvSearch from '@todovue/tv-search'
const app = createApp(App);
app.component("TvSearch", TvSearch);
app.mount("#app");You can open the search component with Ctrl + k or Command + k
<template>
<tv-search
placeholder="Search blog..."
titleButton="Search"
:results="results"
/>
</template>
<script setup>
import { ref } from 'vue';
import TvSearch from '@todov
8000
ue/tv-search';
const results = ref([
{
id: 1,
title: 'How to use Vue 3',
description: 'Vue 3 is the latest version of Vue.js',
url: 'https://todovue.com/blog/how-to-use-vue-3',
},
{
id: 2,
title: 'How to use Vite',
description: 'Vite is a build tool for modern web development',
url: 'https://todovue.com/blog/how-to-use-vite',
},
{
id: 3,
title: 'How to use Pinia',
description: 'Pinia is a modern store for Vue 3',
url: 'https://todovue.com/blog/how-to-use-pinia',
},
{
id: 4,
title: 'How to use Windi CSS',
description: 'Windi CSS is a utility-first CSS framework',
url: 'https://todovue.com/blog/how-to-use-windi-css',
},
{
id: 5,
title: 'How to use Vitesse',
description: 'Vitesse is a Vue 3 starter template',
url: 'https://todovue.com/blog/how-to-use-vitesse',
}
]);
</script>| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| placeHolder | String | "" |
Placeholder input | true |
| titleButton | String | "" |
Title button | true |
| results | Array | [] |
Array of results | true |
| customStyles | Object | See below | Custom styles | false |
| Name | Type | Default | Description |
|---|---|---|---|
| bgBody | String | "#0E131F" |
Background color body |
| bgInput | String | "#B9C4DF" |
Background color input |
| bgButton | String | "#Ef233C" |
Background color button |
| colorButton | String | "#F4FAFF" |
Color button |
| Name | Description |
|---|---|
| search | Event when the search is executed |
You can customize the component by customStyles, you can see the props section to see the available options
const customStyles = {
bgBody: "#0A4539",
bgInput: "#284780",
bgButton: "#80286E",
colorButton: "#D5B7B7",
};<template>
<tv-search
placeholder="Search blog..."
titleButton="Search"
:results="results"
:customStyles="customStyles"
/>
</template>
<script setup>
import { ref } from 'vue';
import TvSearch from '@todovue/tv-search';
const customStyles = ref({
bgBody: "#0A4539",
bgInput: "#284780",
bgButton: "#80286E",
colorButton: "#D5B7B7",
});
const results = ref([
{
id: 1,
title: 'Blog - How to use Vue 3',
description: 'Vue 3 is the latest version of Vue.js',
url: 'https://todovue.com/blog/how-to-use-vue-3',
},
{
id: 2,
title: 'Blog - How to use Vite',
description: 'Vite is a build tool for modern web development',
url: 'https://todovue.com/blog/how-to-use-vite',
},
{
id: 3,
title: 'Blog - How to use Pinia',
description: 'Pinia is a modern store for Vue 3',
url: 'https://todovue.com/blog/how-to-use-pinia',
},
{
id: 4,
title: 'Blog - How to use Windi CSS',
description: 'Windi CSS is a utility-first CSS framework',
url: 'https://todovue.com/blog/how-to-use-windi-css',
},
{
id: 5,
title: 'Blog - How to use Vitesse',
description: 'Vitesse is a Vue 3 starter template',
url: 'https://todovue.com/blog/how-to-use-vitesse',
}
]);
</script>Clone the repository and install the dependencies
git clone https://github.com/TODOvue/tv-search.git
cd tv-search
yarn install