Vue template$15

Docs Layout

Premium Vue 3 documentation template: searchable sidebar, content pages, scroll-aware table of contents, tabbed code blocks with copy, callouts and a mobile drawer.

by Vueplayv1.0.0Updated 2 hours ago

Install
Full screen ↗

About this template

A complete documentation site in the three-column layout developers already know: a section-grouped sidebar on the left, the page in the middle and an "On this page" outline on the right that follows your scroll. It ships with ten realistic pages for a fictional job-queue library, so you can see every building block in context before writing your own.

Pages are data, not HTML. Each one is a list of typed blocks (headings, paragraphs, lists, tables, callouts, code and tabbed code groups, link cards) in src/docs.ts, with a tiny inline syntax for code, bold and cross-page links. The table of contents, search index and previous/next links are all derived from that same data, so adding a page means adding one object.

It is built to be used, not just looked at. Search filters the navigation by title and page content and highlights matches; press / or Cmd+K to focus it and Enter to open the first result. On phones the sidebar becomes an accessible drawer with a focus trap and Esc to close, the outline collapses into a panel, and code tabs support arrow-key navigation. No router, no dependencies beyond Vue.

  • Top bar with search that filters the nav, / and Cmd+K shortcuts
  • Sidebar sections, ten content pages switched by view state with deep-linkable hashes
  • Scroll-spy “On this page” outline, breadcrumbs, prev/next links and page feedback
  • Code blocks and tabbed code groups with syntax colours and copy button
  • Info, tip and warning callouts, tables and link cards
  • Mobile navigation drawer with focus trap, light and dark mode

Code

25 files in the repo

The source is included with the purchase.

Buy it once and use it in unlimited projects: remix it in the Studio, clone the repo, or install it with npm. Props and usage are documented below.

All documentation →
Preview of Admin Dashboard$29

Template · Dashboards

Admin Dashboard

A complete Vue 3 admin dashboard template with a collapsible sidebar, hand-drawn SVG charts, a sortable customers table and settings. Tailwind CSS, dark mode.

by Vueplay
Preview of Blog ArticleFree

Template · Blogs

Blog Article

Long-form Vue 3 article template with hand-tuned Tailwind typography, a scroll-aware table of contents, code blocks, callouts, author box and related posts.

by Vueplay
Preview of Blog IndexFree

Template · Blogs

Blog Index

Vue 3 blog home template with a featured post, drawn cover art, category chips, live search, pagination and a newsletter signup. Tailwind CSS with dark mode.

by Vueplay
Preview of 404 Not Found PageFree

Template · Error pages

404 Not Found Page

Friendly Vue 3 404 page with a drawn compass illustration, live search suggestions and helpful links, plus a compact 500 error variant. Tailwind CSS.

by Vueplay

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings