VitePress

WARNING

Canary Cloud is in active development. Not ready for production use yet.

Three steps to integrate

Step 1: Install @getcanary/web

npm install @getcanary/web

Step 2: Create search component

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

<canary-root framework="vitepress">
  <canary-provider-vitepress-minisearch>
    <canary-provider-cloud api-key="KEY" api-base="https://cloud.getcanary.dev">
      <!-- Rest of the code -->
    </canary-provider-cloud>
  </canary-provider-vitepress-minisearch>
</canary-root>

Step 3: Modify the Layout

.vitepress/theme/index.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) 
    }) 
  } 
  ...
};