Third Party Integration

Search ​

Local Search (MiniSearch) ​

Valaxy has built-in local search based on MiniSearch. It is the recommended local search provider for documentation sites and works without an external service.

The search index is generated by Valaxy during dev/build.

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  search: {
    enable: true,
    provider: 'local',
  },
})

Set search: false in page frontmatter to exclude a page from the local search index.

Local Search (Based on fuse.js) ​

Valaxy also supports local search based on fuse.js. Use it when you need Fuse-specific options or already rely on a generated valaxy-fuse-list.json file.

valaxy fuse generates valaxy-fuse-list.json in the public directory by default. When executing valaxy build, valaxy fuse will be executed automatically when search.provider is fuse.

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  search: {
    enable: true,
    provider: 'fuse',
  },
})

You can customize the Fuse index and matching behavior:

import { defineSiteConfig } from 'valaxy'

export default defineSiteConfig({
  search: {
    enable: true,
    provider: 'fuse',
  },
  fuse: {
    // pattern: 'pages/**/*.md',
    options: {
      keys: ['title', 'tags', 'categories', 'excerpt', 'content'],
      // Lower values make matching stricter.
      threshold: 0.4,
      // Useful when searching full document content.
      ignoreLocation: true,
    },
  },
})

You can also add an explicit fuse generation script in your package.json:

{
  "name": "yun-demo",
  "valaxy": {
    "theme": "yun"
  },
  "scripts": {
    "build": "npm run build:ssg",
    "build:ssg": "valaxy build --ssg",
    "fuse": "valaxy fuse",
    "rss": "valaxy rss"
  },
  "dependencies": {
    "valaxy": "latest",
    "valaxy-theme-yun": "latest"
  }
}

Algolia DocSearch ​

Algolia is an online third-party search service. You need to apply for the ID and Secret by yourself.

DocSearch Only technical document applications are accepted generally.

Valaxy provides a quick integration plug-in: valaxy-addon-algolia (Currently only DocSearch is supported).

Music Player ​

Provided by the valaxy-addon-meting addon, based on APlayer and MetingJS.

Install and enable the addon:

// valaxy.config.ts
import { defineConfig } from 'valaxy'
import { addonMeting } from 'valaxy-addon-meting'

export default defineConfig({
  addons: [
    addonMeting({
      // set `global: true` for a fixed player shown on every page
      global: false,
    }),
  ],
})

Then drop a <meting-js> element anywhere in an article (e.g. a song from NetEase Cloud Music):

<meting-js
 id="22736708"
 server="netease"
 type="song"
 theme="#C20C0C">
</meting-js>

Tip: the aplayer: true frontmatter is still honored by the addon to toggle the global fixed player on a per-page basis. See the addon README for all options.

Here is a demo:

More info see Option | MetingJS

Google Statistics ​

Refer to Custom Extensions | Extending Client Context

You can add Google Statistics by using Vue plug-in directly.

For example:

• Install the dependency: pnpm add vue-gtag-next
• Create setup/main.ts

// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'

export default defineAppSetup((ctx) => {
  installGtag(ctx)
})

• Create setup/gtag.ts

import type { UserModule } from 'valaxy'
import VueGtag, { trackRouter } from 'vue-gtag-next'

export const install: UserModule = ({ isClient, app, router }) => {
  if (isClient) {
    app.use(VueGtag, {
      property: { id: 'G-1LL0D86CY9' },
    })

    trackRouter(router)
  }
}

More info see vue-gtag-next.