tessl/npm--vuepress--theme-default

Default theme for VuePress providing navigation, sidebar, search, and responsive documentation layouts

—

Pending

Overview

Eval results

Files

Theme Configuration

Name: tessl/npm--vuepress--theme-default
Author: tessl

VuePress theme configuration function that sets up the default theme with built-in plugins, component aliases, and conditional features based on theme options.

Capabilities

Default Theme Function

Main theme configuration function exported from the package.

/**
 * VuePress default theme configuration function
 * @param {object} options - Theme configuration options
 * @param {object} ctx - VuePress context containing themeConfig and siteConfig
 * @returns {object} Theme configuration object with alias and plugins
 */
function defaultTheme(options, ctx): {
  alias(): object;
  plugins: Array<string | [string, object]>;
};

Usage Examples:

// Basic theme usage
module.exports = {
  theme: '@vuepress/theme-default',
  themeConfig: {
    navbar: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ]
  }
}

// With theme options
module.exports = {
  theme: ['@vuepress/theme-default', {
    activeHeaderLinks: false
  }],
  themeConfig: {
    smoothScroll: true,
    algolia: {
      apiKey: 'your-api-key',
      indexName: 'your-index'
    }
  }
}

Theme Configuration Object

The theme function returns a configuration object with aliases and plugins.

interface ThemeConfig {
  /** Component aliases for conditional loading */
  alias(): {
    '@AlgoliaSearchBox': string;
  };
  /** Array of VuePress plugins to load */
  plugins: Array<string | [string, object]>;
}

Built-in Plugins

The theme automatically configures these plugins:

// Plugin configurations included in theme
const plugins = [
  ['@vuepress/active-header-links', options.activeHeaderLinks],
  '@vuepress/search',
  '@vuepress/plugin-nprogress',
  ['container', { type: 'tip', defaultTitle: { '/': 'TIP', '/zh/': '提示' }}],
  ['container', { type: 'warning', defaultTitle: { '/': 'WARNING', '/zh/': '注意' }}],
  ['container', { type: 'danger', defaultTitle: { '/': 'DANGER', '/zh/': '警告' }}],
  ['container', { type: 'details', before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`, after: () => '</details>\n' }],
  ['smooth-scroll', enableSmoothScroll]
];

Component Aliases

Dynamic component resolution based on configuration:

interface ComponentAliases {
  /** 
   * Algolia search box - resolves to AlgoliaSearchBox.vue if algolia config present,
   * otherwise resolves to noopModule.js (empty export)
   */
  '@AlgoliaSearchBox': string;
}

Theme Options

Options passed to the theme function:

interface ThemeOptions {
  /** Enable/disable active header links plugin */
  activeHeaderLinks?: boolean | object;
}

Theme Context

VuePress context passed to theme function:

interface ThemeContext {
  /** Theme configuration from site config */
  themeConfig: {
    /** Algolia search configuration */
    algolia?: {
      apiKey: string;
      indexName: string;
      algoliaOptions?: object;
    };
    /** Enable smooth scrolling */
    smoothScroll?: boolean;
    /** Locale-specific configurations */
    locales?: {
      [path: string]: {
        algolia?: object;
      };
    };
  };
  /** Site-wide configuration */
  siteConfig: {
    /** Locale configurations */
    locales?: object;
  };
}

Container Types

The theme provides built-in container types for enhanced content:

::: tip
This is a tip container
:::

::: warning  
This is a warning container
:::

::: danger
This is a danger container
:::

::: details Click to expand
This is a details container with collapsible content
:::

Install with Tessl CLI

npx tessl i tessl/npm--vuepress--theme-default

docs

global-components.md

index.md

page-layout.md

theme-configuration.md

utilities.md

tile.json