How to inject Sidebar to the own theme?

[Lyczeq]

Hello guys,

I am having some troubles making a website using Vuepress. I created my own theme and layout and would like to somehow inject the default Sidebar into that. Is it even possible? I tried to add Sidebar component into the layout but it doesn't work.

There is a template of the Layout:

<template>
  <div class="theme-container">
    <Header />
    <main class="flex m-auto container">
      <div class="xl:w-1/5 px-3 w-0">
        <div class="custom-sidebar">
          <Sidebar />
        </div>
      </div>
      <div class="xl:w-3/5 px-3 lg:w-4/5 w-full main-content overflow-x-auto">
        <h1>{{ $page.frontmatter.title }}</h1>
        <Content />
      </div>
    </main>
    <Footer />
  </div>
</template>

My theme config:

module.exports = {
  extends: '@vuepress/theme-default',
  layouts: {
    Layout: path.resolve(__dirname, './layouts/Layout.vue'),
    404: path.resolve(__dirname, './layouts/404.vue'),
  },
};

Config app:

const path = require('path');

module.exports = {
  lang: 'en-US',
  title: 'Hello, VuesssPress',
  description: 'This is my first VuePress site',
  theme: path.resolve(__dirname, './theme'),
  themeConfig: {
    darkMode: false,
    sidebar: [
      // SidebarItem
      {
        text: 'Foo',
        link: '/foo/',
        children: [
          // SidebarItem
          {
            text: 'github',
            link: 'https://github.com',
            children: [],
          },
          // string - page file path
          '/foo/bar.md',
        ],
      },
      // string - page file path
      '/bar/README.md',
    ],
  },
};

[Mister-Hope]

Hi, we add docs about that. Check https://v2.vuepress.vuejs.org/reference/default-theme/extending.html#layout-slots. You should import Sidebar from @vuepress/theme-default.

Welcome to share if you have further questions.