Vuepress: External urls in the sidebar

Created on 24 Aug 2018 · 6Comments · Source: vuejs/vuepress

Feature request

What problem does this feature solve?

Allows users to put external URLs in the sidebar

What does the proposed API look like?

Not sure

How should this be implemented in your opinion?

I would do it exactly the same as header menu items {text: 'foo', link: 'google.com'}

Are you willing to work on this yourself?**

Yes, point me in the right direction :)

theme feature request

Source

hoppities

👍5

Most helpful comment

Noise? I understand how what looks like a normal question to me, sounds like constant nagging to you. I apologize for that nuisance. I see quite the opposite. I invested the time to document the existing syntax, how this could be integrated with Vuepress and how the exact error looks like, so there is a chance to properly implement this. I am not urging you to develop this off the spot, I rather wanted to know your professional opinion on this subject. With your help I might be able to come up with a PR, so you can focus on _the_ "important thing". Also, I thought it would be nice for the devs of Vue to see where Vuepress is going to be used, so I didn't consider that as noise. I always found projects such as https://madewithvuejs.com/ very inspiring, even though it was not created by the maintainers of the project. So I was eager to share my findings and my contribution in the shape of error logs and what I'm doing and thought I'm contributing. How foolish of me to think that. Besides, I think this is not only important for me? Clearly I'm not the only one interested to see this would be a good addition.

I removed my previous comment and in the future I will only submit PRs instead, to keep the noise down so you can focus on the important things. Thanks for maintaining this project.

MartinMuzatko on 18 Sep 2018

👍8

All 6 comments

Hi,

Are you proposing this for core theme, either way what stops one from doing this with a custom component?

Cheers

ldexterldesign on 28 Aug 2018

You can use the [] array notation for separating link and name. like so:

['/home/', 'Introduction'],

However, when this does not work with external links.
With this example: ['https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md', 'Contribution Guide'] - you get the following error:

util.js?1d3b:69 [vuepress] No matching page found for sidebar item "/3.x.x/https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md"
resolvePage @ util.js?1d3b:69
vue.runtime.esm.js?a77b:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'match' of undefined"

found in

---> <SidebarGroup> at usr/lib/node_modules/vuepress/lib/default-theme/SidebarGroup.vue
       <Sidebar> at usr/lib/node_modules/vuepress/lib/default-theme/Sidebar.vue
         <Layout> at usr/lib/node_modules/vuepress/lib/default-theme/Layout.vue
           <Root>
warn @ vue.runtime.esm.js?a77b:587
Show 1 more blackboxed frame
vue.runtime.esm.js?a77b:1737 TypeError: Cannot read property 'match' of undefined
    at getHash (util.js?1d3b:13)
    at isActive (util.js?1d3b:47)
    at render (SidebarLink.vue?4f97:10)
    at options.render (index.js?b863:80)
    at createFunctionalComponent (vue.runtime.esm.js?a77b:4056)
    at createComponent (vue.runtime.esm.js?a77b:4246)
    at _createElement (vue.runtime.esm.js?a77b:4416)
    at createElement (vue.runtime.esm.js?a77b:4353)
    at vm._c (vue.runtime.esm.js?a77b:4485)
    at eval (eval at ../../../../../../../../usr/lib/node_modules/vuepress/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/usr/lib/node_modules/vuepress/node_modules/.cache/vuepress","cacheIdentifier":"18aed22c-vue-loader-template"}!../../../../../../../../usr/lib/node_modules/vuepress/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../../../usr/lib/node_modules/vuepress/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../usr/lib/node_modules/vuepress/node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../../../../../usr/lib/node_modules/vuepress/lib/default-theme/SidebarGroup.vue?vue&type=template&id=2bc73b02 (app.js:2185), <anonymous>:44:20)
logError @ vue.runtime.esm.js?a77b:1737
Show 1 more blackboxed frame
vue.runtime.esm.js?a77b:587 [Vue warn]: Invalid prop: type check failed for prop "to". Expected String, Object, got Undefined.

found in

---> <RouterLink>
       <Page> at usr/lib/node_modules/vuepress/lib/default-theme/Page.vue
         <Layout> at usr/lib/node_modules/vuepress/lib/default-theme/Layout.vue
           <Root>
warn @ vue.runtime.esm.js?a77b:587
Show 1 more blackboxed frame
vue.runtime.esm.js?a77b:1737 TypeError: Cannot read property 'name' of undefined
    at normalizeLocation (vue-router.esm.js?855a:1276)
    at VueRouter.resolve (vue-router.esm.js?855a:2574)
    at Proxy.render (vue-router.esm.js?855a:409)
    at VueComponent.Vue._render (vue.runtime.esm.js?a77b:4540)
    at VueComponent.updateComponent (vue.runtime.esm.js?a77b:2784)
    at Watcher.get (vue.runtime.esm.js?a77b:3138)
    at new Watcher (vue.runtime.esm.js?a77b:3127)
    at mountComponent (vue.runtime.esm.js?a77b:2791)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?a77b:7995)
    at init (vue.runtime.esm.js?a77b:4133)

It would be nice to have this in the core!

MartinMuzatko on 18 Sep 2018

I removed my previous comment and in the future I will only submit PRs instead, to keep the noise down so you can focus on the important things. Thanks for maintaining this project.

MartinMuzatko on 18 Sep 2018

👍8

This would be really useful for us. Any chance of re-evaluating this suggestion @ulivz ?