vuejs
Next Page Always Shows First Page
Describe the bug
I cannot for the life of me get the Next Page button to show anything but the first page (in this case Introduction) I know there are several issues that have been closed about this same topic, but their resolutions are all to use absolute URLs, which I am. Below is my configuration and what the shape of the sidebar settings looks like:
Reproduction
export default defineConfig({
appearance: 'force-dark',
base: '/',
cleanUrls: true,
description: 'Build emails with a delightful DX',
head: [
[
'link',
{
rel: 'shortcut icon',
href: `data:image/svg+xml;charset=UTF-8,%3csvg width='126' height='113' viewBox='0 0 126 113' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.199951 50V109V113H4.19995H121.8H125.8V109V50H117.8V105H8.19995V50H0.199951Z' fill='%2364595C'/%3e%3cpath d='M0 53.429V47.4258L48.3069 22.8124V32.4176L11.2516 50.2773L11.5517 49.677V51.1778L11.2516 50.5775L48.3069 68.4372V78.0424L0 53.429Z' fill='%2364595C'/%3e%3cpath d='M79.4367 0L54.6832 92H46.582L71.3356 0H79.4367Z' fill='%2364595C'/%3e%3cpath d='M126 53.429L77.6931 78.0424V68.4372L114.748 50.5775L114.448 51.1778V49.677L114.748 50.2773L77.6931 32.4176V22.8124L126 47.4258V53.429Z' fill='%2364595C'/%3e%3c/svg%3e `
}
]
],
ignoreDeadLinks: true,
markdown: {
theme: {
dark: 'slack-dark',
light: 'slack-ochin'
}
},
outDir: './dist',
srcDir: 'markdown',
themeConfig: {
logo: '/logo.svg',
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Documentation', link: '/docs/introduction' },
{ text: 'Quick Start', link: '/docs/quick-start' },
{ text: 'Email Samples', link: '/docs/samples' }
],
sidebar,
siteTitle: '',
socialLinks: [
{ icon: 'discord', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'github', link: 'https://github.com/shellscape/jsx-email' }
]
},
titleTemplate: 'JSX email • :title'
});
And the sidebar:
[
{
text: 'Meat and Potatoes',
items: [
{ link: '/docs/introduction', text: 'Introduction' },
{ link: '/docs/quick-start', text: 'Quick Start' },
{ link: '/docs/contributing', text: 'Contributing' }
]
},
{
text: 'Components',
items: [
{ link: '/docs/components/button', text: 'Button' },
{ link: '/docs/components/column', text: 'Column' },
{ link: '/docs/components/container', text: 'Container' },
{ link: '/docs/components/font', text: 'Font' },
{ link: '/docs/components/head', text: 'Head' },
{ link: '/docs/components/heading', text: 'Heading' },
{ link: '/docs/components/hr', text: 'Hr' },
{ link: '/docs/components/html', text: 'Html' },
{ link: '/docs/components/image', text: 'Image' },
{ link: '/docs/components/link', text: 'Link' },
{ link: '/docs/components/markdown', text: 'Markdown' },
{ link: '/docs/components/preview', text: 'Preview' },
{ link: '/docs/components/row', text: 'Row' },
{ link: '/docs/components/section', text: 'Section' },
{ link: '/docs/components/tailwind', text: 'Tailwind' },
{ link: '/docs/components/text', text: 'Text' }
]
},
{
text: 'Core',
items: [
{ link: '/docs/core/cli', text: 'Cli' },
{ link: '/docs/core/render', text: 'Render' }
]
}
]
Expected behavior
Following advice in other issues, I would have expected that using absolute urls in link would produce a behavior where the Next Page button would indeed show the name and url of the next page in the sidebar.
System Info
MacOS Ventura
Vitepress@latest
Node v18
(envinfo hangs on an M2)
Additional context
No response
Validations
- [X] Check if you're on the latest VitePress version.
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Are those links in sidebar working? Can you share a minimal version of this via https://vitepress.new ?
Links in the sidebar are indeed working. I'm not sure how to boil down the implementation to something more minimal in this context. The site is fairly small and can be found here: https://github.com/shellscape/jsx-email/tree/main/apps/web
I faced this not too long ago, the only way I found to make it work was to create a base url and then set all links relative to that. Here's an example:
sidebar: {
"/docs/options": {
base: "/docs/options",
items: [
{
text: "Example 1",
collapsed: false,
items: [
{ text: "First page", link: "/" }, // equivalent file /docs/options/index.md
{ text: "Second page", link: "/two" }, // equivalent file /docs/options/two.md
{ text: "Third page", link: "/three" }, // equivalent file /docs/options/three.md
],
},
],
},
},
I'm having the exact same issue. I'm new to VitePress, and just following along with the examples, so I have no clue why this isn't working.
@bukowa In that example you've extra trailing slash. Remove them, it'll work fine:
@brc-dd Thank you it works but I just created another example with sub folder where this is broken: https://stackblitz.com/edit/vite-yzovsb
The second link doesn't have trailing slash 🫠
/foo/index.md -> /foo/ /foo/bar.md -> /foo/bar /baz.md -> /baz
The second link doesn't have trailing slash 🫠
Oh ok lol thanks again. Confusing really
Here is an example: https://stackblitz.com/edit/vite-atxxax?file=docs%2F.vitepress%2Fconfig.ts
The Get Started page will have Server Side as next page, but all other pages will have Get Started as next page.
@lepture Like I said earlier, there should be proper leading/trailing slashes. Read my earlier comments. Add proper slashes to your example, it will work fine:
Each link should specify the path to the actual file starting with /. If you add trailing slash to the end of link, it will show index.md of the corresponding directory.
Each link should specify the path to the actual file starting with /. If you add trailing slash to the end of link, it will show index.md of the corresponding directory.
This is the core bro thx for your concise and to the point answer. On docs:dev it seems everything is ok, but on docs:build it will break, which really makes me confused.
