CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm--vuepress--theme-default

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vuepress/theme-default@1.9.x
Publish Source
CLI
Badge
tessl/npm--vuepress--theme-default badge