core: [Bug report] Overwriting default theme components does not work anymore

Bug report

Description

With VuePress v1 it was possible to overwrite certain components of the default theme simply by putting them into docs/.vuepress/theme/components folder. I was using this approach to add a custom footer with a link to the imprint / contact information to every page, as required by German law.

Repository: here.

I want to move to VuePress v2, but I couldn’t get this approach to work.

Steps to reproduce

Add theme: path.resolve(__dirname, './theme'), to docs/.vuepress/config.ts as described here. This was not necessary previously, but adding this made it find docs/.vuepress/theme/index.ts.
Create docs/.vuepress/theme/index.ts with following content:

module.exports = {
  extends: '@vuepress/theme-default',
}

Copy vuepress-next/packages/@vuepress/theme-default/src/components/Page.vue from the official vuepress-next repo to docs/.vuepress/theme/components of your app to deploy and change the content of the file.

I did also try to put the component into docs/.vuepress/theme/src/components without any effect.

Expected behavior

The change should be applied to the web application.

Environment info

Browser: Chromium Version 87.0.4280.88 (Offizieller Build) Arch Linux (64-Bit)
Output of vuepress info:

  System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.23 GB / 23.26 GB
    Shell: 5.1.0 - /bin/bash
  Binaries:
    Node: 12.20.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.9 - /usr/bin/npm
  Utilities:
    Git: 2.29.2 - /usr/bin/git
  Browsers:
    Chrome: Not Found
    Firefox: 84.0.2
  npmPackages:
    @vuepress/bundler-vite: Not Found
    @vuepress/bundler-webpack:  2.0.0-beta.7 
    @vuepress/cli:  undefined (2.0.0-beta.7)
    @vuepress/client:  2.0.0-beta.7 
    @vuepress/core:  2.0.0-beta.7 
    @vuepress/markdown:  2.0.0-beta.7 
    @vuepress/plugin-active-header-links:  2.0.0-beta.7 
    @vuepress/plugin-back-to-top:  2.0.0-beta.7 
    @vuepress/plugin-container:  2.0.0-beta.7 
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-git:  2.0.0-beta.7 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.7 
    @vuepress/plugin-nprogress:  2.0.0-beta.7 
    @vuepress/plugin-palette:  2.0.0-beta.7 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.7 
    @vuepress/shared:  2.0.0-beta.7 
    @vuepress/theme-default:  2.0.0-beta.7 
    @vuepress/theme-vue: Not Found
    @vuepress/utils:  2.0.0-beta.7 
    vue:  3.0.11 
    vue-loader:  16.2.0 
    vue-router:  4.0.6 
    vuepress: ^2.0.0-beta.7 => 2.0.0-beta.7 
    vuepress-vite: Not Found

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 15 (7 by maintainers)

Most upvoted comments

Supported in f480bb25943fe1a81e2ceda8f1b53afbb11b254c

meteorlxy on Jan 11, 2022

Well, we still support extending a theme, but we currently remove the @theme and @parent-theme aliases, because we do not require a conventional theme directory structure anymore

meteorlxy on Apr 11, 2021

@reynoldsalec The reason is simple: just no bandwidth for that. 😅 Contribution welcome!

meteorlxy on Dec 15, 2021

Yeah I was bummed as well, @meteorlxy would you accept a PR that implemented alias for theme-default, or is that a conscious architectural decision?

reynoldsalec on Dec 14, 2021

VuePress@v2 doesn’t support theme extending (or inheritance) now.

Mister-Hope on Apr 9, 2021

For anyone else trying to extend the theme-default: if you want to override some of the base components, probably the best way to do it is to substitute your own components in the slots that theme-default provides.

For example, if you have a theme that extends theme-default and want to override the Navbar component, you can define your own Navbar component in your theme, then simply do something like this in the Layout.vue within your theme:

<template>
  <Layout>
    <template #navbar>
      <Navbar />
    </template>
    <template #page-bottom>
      <div class="my-footer">This is my custom page footer</div>
    </template>
  </Layout>
</template>

I wrote up an example guide here

reynoldsalec on Dec 14, 2021

@meteorlxy was explaining that they chose not to implement the alias functionality on @vuepress/theme-default, so it’s not possible to override specific theme components on the core default theme using the alias functionality.

Other theme authors may choose to implement the alias functionality in their themes to provide this functionality. Hope that helps @chris-dura and anyone else looking.

reynoldsalec on Dec 10, 2021

It’s still available via alias.

In v1, core registers all components in theme/components directory to alias implicitly, because it requires a conventional directory structure.

We can still do that in v2. The only difference is we currently remove it from core, while theme authors can still do that

@meteorlxy – I’m writing a custom local theme that extends the default theme. You gave an example of overriding the Layout.vue; however, I’m having a hard time understanding your response to @Mister-Hope about overriding a single component with alias. For example, I want to use everything as-is in the default theme, but I want to write my own custom Sidebar.vue component and use that instead.

Is that possible in Vuepress@v2? If so, can you clarify how to use alias directly to do that??

chris-dura on Sep 8, 2021