or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

global-components.mdindex.mdnavigation.mdpage-layout.mdsidebar.mdtheme-configuration.mdutilities.md
tile.json

tessl/npm--vuepress--theme-default

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vuepress/theme-default@1.9.x

To install, run

npx @tessl/cli install tessl/npm--vuepress--theme-default@1.9.0

index.mddocs/

VuePress Default Theme

VuePress Default Theme is a Vue.js-based documentation theme that provides a complete layout system with navigation, sidebar, search functionality, and responsive design. It includes built-in plugins for active header links, search, progress indicators, and custom container blocks.

Package Information

  • Package Name: @vuepress/theme-default
  • Package Type: npm
  • Language: JavaScript (Vue.js)
  • Installation: npm install @vuepress/theme-default

Core Imports

// Theme configuration function
const defaultTheme = require('@vuepress/theme-default');

// Individual utility functions
const { 
  normalize, 
  isExternal, 
  resolvePage, 
  resolveSidebarItems 
} = require('@vuepress/theme-default/util');

For ESM:

import defaultTheme from '@vuepress/theme-default';
import { normalize, isExternal } from '@vuepress/theme-default/util';

Basic Usage

// VuePress config file
module.exports = {
  theme: '@vuepress/theme-default',
  themeConfig: {
    navbar: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    sidebar: {
      '/guide/': [
        {
          title: 'Getting Started',
          children: ['/guide/', '/guide/installation']
        }
      ]
    },
    searchMaxSuggestions: 10,
    smoothScroll: true
  }
}

Architecture

VuePress Default Theme is organized around several key components:

  • Theme Configuration: Main theme function that configures plugins and component aliases
  • Layout System: Two main layouts (Layout.vue for content pages, 404.vue for error pages)
  • Component Library: 15+ Vue components for navigation, sidebar, content display
  • Global Components: Reusable components (Badge, CodeGroup, CodeBlock) available globally
  • Utility Functions: Path processing, page resolution, and sidebar generation utilities
  • Styling System: Stylus-based styles with customizable variables and responsive design

Capabilities

Theme Configuration

Main theme configuration function that sets up plugins, aliases, and component resolution based on theme options.

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

Theme Configuration

Navigation Components

Navigation bar and dropdown menu components for site-wide navigation with responsive design and active state handling.

// Vue component exports (available as @theme/components/*)
const Navbar: VueComponent;
const NavLinks: VueComponent;
const NavLink: VueComponent;
const DropdownLink: VueComponent;

Navigation

Sidebar Components

Sidebar navigation system with collapsible groups, active link highlighting, and mobile responsive behavior.

// Vue component exports  
const Sidebar: VueComponent;
const SidebarLinks: VueComponent;
const SidebarLink: VueComponent;
const SidebarGroup: VueComponent;
const SidebarButton: VueComponent;

Sidebar

Page Layout Components

Core page layout and content display components including homepage hero layout and standard page wrapper.

// Vue component exports
const Layout: VueComponent;  // Main layout with navbar, sidebar, content
const Home: VueComponent;    // Homepage hero layout
const Page: VueComponent;    // Standard page content wrapper
const PageEdit: VueComponent; // Edit page links and metadata
const PageNav: VueComponent; // Next/previous page navigation

Page Layout

Global Components

Globally available Vue components for content enhancement including badges, code blocks, and tabbed code groups.

// Globally registered components (available in all markdown files)
const Badge: VueComponent;     // Inline badge/label with color variants
const CodeGroup: VueComponent; // Tabbed code block container  
const CodeBlock: VueComponent; // Individual code block

Global Components

Utility Functions

Path processing, page resolution, and sidebar generation utilities for theme customization and extension.

// Core utility functions
function normalize(path: string): string;
function isExternal(path: string): boolean;
function resolvePage(pages: Page[], rawPath: string, base?: string): Page;
function resolveSidebarItems(page: Page, regularPath: string, site: SiteData, localePath: string): SidebarGroup[];

Utilities

Types

interface VueComponent {
  // Vue.js component definition
  name?: string;
  props?: object;
  data?(): object;
  methods?: object;
  computed?: object;
  // ... other Vue component options
}

interface Page {
  key: string;
  path: string;
  regularPath: string;
  title: string;
  frontmatter: object;
  headers?: Header[];
}

interface Header {
  level: number;
  title: string;
  slug: string;
  children?: Header[];
}

interface SiteData {
  pages: Page[];
  themeConfig: object;
}

interface SidebarGroup {
  type: 'group' | 'page' | 'external' | 'auto';
  title?: string;
  path?: string;
  children?: SidebarGroup[];
  collapsable?: boolean;
  sidebarDepth?: number;
}