How to inherit theme

[fjun99]

How to do theme inheritance like VuePress in VitePress

VuePress docs: https://vuepress.vuejs.org/theme/inheritance.html

I would like to inherit the theme-default and change some component.

Thanks.

[brc-dd]

https://vitepress.dev/guide/extending-default-theme

[fjun99]

https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme

Thanks. Have read this docs and still have no idea how to modify.

1. case 1: add components. Done

    // register your custom global components
    ctx.app.component('MyComp',MyComp /* ... */)

2. case 2: still have problem

How to modify some parts of VPDoc by inherit it.

How to add layouts other than doc, page, and home

[brc-dd]

How to modify some parts of VPDoc by inherit it.

You can add stuff via slots: https://vitepress.dev/guide/extending-default-theme#layout-slots
or maybe replace specific components completely: https://vitepress.dev/guide/extending-default-theme#overriding-internal-components

[brc-dd]

How to add layouts other than doc, page, and home

Something like this should work:

<!--.vitepress/theme/MyLayout.vue-->
<script setup>
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'

const { Layout } = DefaultTheme
const { frontmatter } = useData()
</script>

<template>
  <div v-if="frontmatter.layout === 'foo'">Custom Layout</div>
  <Layout v-else />
</template>

[fjun99]

Add via slots is tried. it can solve part of my problem.

Another part of the problem is css. For example, 'aside' css is defined in VPDoc. Currently, I modify it by add '!important' in custom.css.

Although my problem is solved, I still wonder whether we can do theme inheritance like VuePress.

[fjun99]

How to add layouts other than doc, page, and home

Something like this should work:

<!--.vitepress/theme/MyLayout.vue-->
<script setup>
import DefaultTheme from 'vitepress/theme'
import { useData } from 'vitepress'

const { Layout } = DefaultTheme
const { frontmatter } = useData()
</script>

<template>
  <div v-if="frontmatter.layout === 'foo'">Custom Layout</div>
  <Layout v-else />
</template>

thanks. will try immediately.

[brc-dd]

Another part of the problem is css. For example, 'aside' css is defined in VPDoc. Currently, I modify it by add '!important' in custom.css.

You can increase the specificity of your CSS to override ours. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#tips_for_handling_specificity_headaches

Also the order of imports matters. Don't import your css before importing the theme.