# Code Switcher

# Quick Start

  • Input
<CodeSwitcher :languages="{ js: 'JavaScript', ts: 'TypeScript' }">
<template v-slot:js>

```js
module.exports = function (str) {
  return typeof str === "string" && str.trim() === str;
};
```

</template>
<template v-slot:ts>

```ts
export default function isString(str: string): str is string {
  return typeof str === "string" && str.trim() === str;
}
```

</template>
</CodeSwitcher>
  • Output:
  • JavaScript
  • TypeScript
module.exports = function (str) {
  return typeof str === "string" && str.trim() === str;
};

# Custom Groups

# Define Groups

// .vuepress/config.ts
import { ThemeConfig } from "vuepress-theme-vt";
import { defineConfig4CustomTheme } from "vuepress/config";

export = defineConfig4CustomTheme<ThemeConfig>({
  theme: "vt",
  themeConfig: {
    codeSwitcher: {
      groups: {
        default: { ts: "TypeScript", js: "JavaScript" },
        "plugin-usage": { tuple: "Tuple", object: "Object" },
      },
    },
  },
});

# Using Groups

  • Input:
<CodeSwitcher name="plugin-usage">
<template v-slot:tuple>

```ts
module.exports = {
  plugins: [
    [
      "vuepress-plugin-xxx",
      {
        /* options */
      },
    ],
  ],
};
```

</template>
<template v-slot:object>

```ts
module.exports = {
  plugins: {
    xxx: {
      /* options */
    },
  },
};
```

</template>
</CodeSwitcher>
  • Output:
  • Tuple
  • Object
module.exports = {
  plugins: [
    [
      "foo",
      {
        /* options */
      },
    ],
  ],
};