Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending the vitepress theme #235

Closed
ghost opened this issue Feb 11, 2021 · 9 comments
Closed

Extending the vitepress theme #235

ghost opened this issue Feb 11, 2021 · 9 comments
Labels
docs Improvements or additions to documentation

Comments

@ghost
Copy link

ghost commented Feb 11, 2021

I'd like to only have a custom NavLinks component while keeping the default vitepress theme. Next I looked at the NavBar although also my version doesn't override. Any help in the right direction would be great.

docs/.vitepress/config.js

import Theme from 'vitepress/theme'
import '../../assets/vars.css'
import NavBar from './Mynav.vue'

const MyTheme = {...Theme, Layout: {...Theme.Layout, NavBar}}

export default {
    ...MyTheme,
    NotFound: () => 'custom 404',
    enhanceApp({app, router, siteData}) {

    },
}
@agritheory
Copy link

Maybe this will help?
#157

@ghost
Copy link
Author

ghost commented Mar 11, 2021

The default theme is brilliant however I don't want to clone the entire theme into my working dir. I'm not sure how to extend simply the menu as I'd like to keep upstream changes without effort.

I moved on to creating my own theme however would love information on how to extend the default.

@agritheory
Copy link

@ahawkclint After some messing around, I'm in the same boat. I was hoping for a strategy from Vitepress where I could provide a variables file. While I think this is possible, it's not particularly clear to me how to do that. Did you make any progress?

@sadeghbarati
Copy link
Contributor

I follow the documentation for customizing the default theme Vue components but it's not working

.
├─ docs
│ ├─ .vitepress
│ │ ├─ theme
│ │ │ └─ index.js
│ │ └─ config.js
│ └─ index.md
└─ package.json

for example, I want to customize default LastUpdated.vue

so in the theme directory create another directory called components just like vitepress/dist/client/theme-default/

import DefaultTheme from 'vitepress/theme'
import LastUpdated from './components/LastUpdated.vue'

export default {
    ...DefaultTheme,
    LastUpdated,
    NotFound: () => 'custom 404',
    enhanceApp({ app, router, siteData }) {
        // app is the Vue 3 app instance from `createApp()`. router is VitePress'
        // custom router. `siteData`` is a `ref`` of current site-level metadata.
    }
}

@soulsam480
Copy link
Contributor

Hii, @sadeghbarati I think it'll work if you register the component properly

import DefaultTheme from 'vitepress/theme'
import LastUpdated from './components/LastUpdated.vue'

export default {
    ...DefaultTheme,
    NotFound: () => 'custom 404',
    enhanceApp({ app, router, siteData }) {
    app.component('last-updated',LastUpdated)
        // app is the Vue 3 app instance from `createApp()`. router is VitePress'
        // custom router. `siteData`` is a `ref`` of current site-level metadata.
    }
}

@titouanmathis
Copy link

Registering the component globally did not work for me, but defining aliases in vite.config.js did:

const { defineConfig } = require('vite');
const path = require('path');

module.exports = defineConfig({
  resolve: {
    alias: {
      // Use my custom `NavBarTitle` component
      './NavBarTitle.vue': path.resolve(__dirname, '.vitepress/theme/components/NavBarTitle.vue'),
    },
  },
});

@emersonbottero
Copy link

This should be added to the interface of vitepress config so we can replace each default theme component..
this way we can replace a specific component and an plugin that adds darktheme can replace only the navbars component and a search plugin could change only the algolia component and so on..
multiple themes could be added chained and it would work as intended.

@kiaking kiaking added enhancement New feature or request theme Related to the theme labels May 24, 2022
@userquin
Copy link
Collaborator

userquin commented Jul 8, 2022

One can do stuff like this for now:

https://github.com/antfu/vite-plugin-pwa/blob/ca8be823fecda2194b752ce50a8147d3de181ab1/docs/plugins/navbar.ts

// plugins/navbar.ts

import type { Plugin } from 'vite'

export default function NavbarFix(): Plugin {
  return {
    name: 'vitepress-sidebar-logo-fix',
    enforce: 'pre',
    transform(code, id) {
      if (id.includes('VPNavBarTitle.vue') && !id.endsWith('.css')) {
        return `override this component here. refer the above link for complete example`
      }
    }
  }
}

Then add a vite.config.ts at your docs root with this content:

import { defineConfig } from 'vite'
import NavbarFix from './plugins/navbar'

export default defineConfig({
  plugins: [NavbarFix()]
})

You'll need to change

id.includes('VPNavBarTitle.vue') && !id.endsWith('.css')

to

id.endsWith('VPNavBarTitle.vue')

after VitePress starts using Vite 3.

@brc-dd brc-dd added the has-workaround Has workaround, low priority label Jan 4, 2023
@brc-dd brc-dd added docs Improvements or additions to documentation and removed enhancement New feature or request theme Related to the theme has-workaround Has workaround, low priority labels Mar 10, 2023
@brc-dd
Copy link
Member

brc-dd commented Mar 10, 2023

Let's just document the alias method. I don't think there is any other way to properly replace the theme components.

@brc-dd brc-dd closed this as completed in 1296811 Mar 10, 2023
brc-dd added a commit that referenced this issue Mar 11, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
docs Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

8 participants