🐤 Canary

Appearance

VitePress ​

TIP

If you're looking for Canary Cloud, please refer to this page instead.

VitePress is Vite & Vue powered static site generator.

VitePress uses Minisearch as its default local search, and you can use canary-provider-vitepress-minisearch to leverage it.

Three steps to integrate ​

Step 1: Install @getcanary/web ​

bash
npm install @getcanary/web

Step 2: Create search component ​

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

Step 3: Replace default component with Canary's ​

js
export default defineConfig({
  ...
  vue: { 
    template: { 
      compilerOptions: { 
        isCustomElement: (tag) => tag.includes("canary-"), 
      }, 
    }, 
  }, 
  vite: { 
    resolve: { 
      alias: [ 
        { 
          find: /^.*\/VPNavBarSearch\.vue$/, 
          replacement: fileURLToPath( 
            new URL("<RELATIVE_PATH>.vue", import.meta.url), 
          ), 
        }, 
      ], 
    }, 
  }, 
  themeConfig: {
    // Don't forget to enable local search
    search: { provider: "local" } 
    ...
  },
  ...
});

TIP

If you get the following error:

bash
Internal server error: Failed to resolve import "./VPNavBarSearch.vue"

Please make sure <RELATIVE_PATH>.vue in .vitepress/config.mts is correct.