🐤 Canary

Appearance

VitePress ​

Three steps to integrate ​

Step 1: Install @getcanary/web ​

bash
npm install @getcanary/web

Step 2: Create search component ​

Take a look at our CloudSearch.vue implementation as an example.

html
<canary-root framework="vitepress">
  <canary-provider-vitepress-minisearch>
    <canary-provider-cloud project-key="KEY" api-base="https://cloud.getcanary.dev">
      <!-- Rest of the code -->
    </canary-provider-cloud>
  </canary-provider-vitepress-minisearch>
</canary-root>
If you like the look-and feel of the VitePress's default search bar
  1. Import the component
js
import VPNavBarSearchButton from "vitepress/dist/client/theme-default/components/VPNavBarSearchButton.vue";
  1. Plug it in the "trigger" slot
html
<VPNavBarSearchButton slot="trigger" />

Step 3: Modify the Layout ​

js
import { h } from 'vue'
import Search from "<YOUR_COMPONENT_PATH>.vue"

/** @type {import('vitepress').Theme} */
export default {
  ...
  Layout() { 
    return h(DefaultTheme.Layout, null, { 
      'nav-bar-content-before': () => h(Search) 
    }) 
  } 
  ...
};