vue.js - Redirect main title link in vitepress to my personal website - Stack Overflow

I have built my personal website using vue. I'm now attempting to add a blogging feature to it using vitepress. Vitepress appears to be essentially creating it own site, and expects its own index.md page which would show all my blogs, but what I want to do is - list my blogs on my vue app (at /) and provide links to blogs at /blog/blogName.

I'm able to achieve part of this problem, i.e. I'm able to host my blogs at /blog/blogName using the following config.js

export default {
    // site-level options
    title: 'My Blog',
    description: 'Just playing around.',

    // themeConfig: {
    //     // theme-level options
    // },
    base: "/blog",
    outDir: '../public/blog',
    cleanUrls: true,
    rewrites: {
        "/blog": "../index.html",
    }
}

Issue:

1. I want to either redirect back to / from the title which doesn't seem to be possible after a read through their documentation? or
2. I want to create an external redirect from /blog to /

So I have tried using the following approaches to create the redirect -

1. Using vitepress itself through the rewrites option in config.js [shown in the snippet above]
2. Using vue (router) to create the redirect

import { createRouter, createWebHistory } from "vue-router";

import Home from "./views/Home.vue";
import PageNotFound from "./views/404.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/404",
        name: "404",
        component: PageNotFound,
    },
    {
        path: "/blog",
        redirect: "/",
    },
    {
        path: "/:catchAll(.*)",
        name: "404",
        component: PageNotFound,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

3. Since I'm using netlify to host my app, I thought I'd attempt using their redirect feature as well.

[[redirects]]
  from = "/blog"
  to = "/"
  status = 301
  force = true

4. Manually overwriting the link in the generated vitepress html page

Now the common issue I face using any of these methods is that when I am redirected to / I see this 404 page, until I manually refresh which then leads me to my actual website page.

So tl;dr, I essentially want a back button (the "my blog" title) from my vitepress blog site (/blog/blogName) to the homepage of my personal website (/) without it showing me the 404 page.

PS: I would ideally like to stick with vitepress, however I would be open to other library suggestions if they provide if they provide a similar "already themed" structure.

I have built my personal website using vue. I'm now attempting to add a blogging feature to it using vitepress. Vitepress appears to be essentially creating it own site, and expects its own index.md page which would show all my blogs, but what I want to do is - list my blogs on my vue app (at /) and provide links to blogs at /blog/blogName.

I'm able to achieve part of this problem, i.e. I'm able to host my blogs at /blog/blogName using the following config.js

export default {
    // site-level options
    title: 'My Blog',
    description: 'Just playing around.',

    // themeConfig: {
    //     // theme-level options
    // },
    base: "/blog",
    outDir: '../public/blog',
    cleanUrls: true,
    rewrites: {
        "/blog": "../index.html",
    }
}

Issue:

1. I want to either redirect back to / from the title which doesn't seem to be possible after a read through their documentation? or
2. I want to create an external redirect from /blog to /

So I have tried using the following approaches to create the redirect -

1. Using vitepress itself through the rewrites option in config.js [shown in the snippet above]
2. Using vue (router) to create the redirect

import { createRouter, createWebHistory } from "vue-router";

import Home from "./views/Home.vue";
import PageNotFound from "./views/404.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/404",
        name: "404",
        component: PageNotFound,
    },
    {
        path: "/blog",
        redirect: "/",
    },
    {
        path: "/:catchAll(.*)",
        name: "404",
        component: PageNotFound,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

3. Since I'm using netlify to host my app, I thought I'd attempt using their redirect feature as well.

[[redirects]]
  from = "/blog"
  to = "/"
  status = 301
  force = true

4. Manually overwriting the link in the generated vitepress html page

Now the common issue I face using any of these methods is that when I am redirected to / I see this 404 page, until I manually refresh which then leads me to my actual website page.

So tl;dr, I essentially want a back button (the "my blog" title) from my vitepress blog site (/blog/blogName) to the homepage of my personal website (/) without it showing me the 404 page.

PS: I would ideally like to stick with vitepress, however I would be open to other library suggestions if they provide if they provide a similar "already themed" structure.

• vue.js
• vitepress

Share Improve this question Follow asked Jan 11 at 15:00 RiBiRiBi 88311 gold badge1010 silver badges2727 bronze badges 2

• Do you have a public github profile to share? – kissu Commented Jan 11 at 19:25
• @kissu Sadly its private at the moment. I'm happy to share any additional details, but if you believe you require the entire context, I'm open to making it public. – RiBi Commented Jan 12 at 2:01

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can do something like this in your vitepress config:

import { defineConfig } from 'vitepress'

export default defineConfig({
  base: '/blog/'

  themeConfig: {
    logoLink: {
      link: '/'
      target: '_self' // explicit target is needed to prevent
                      // vitepress router from intercepting link
    }
  }
})

You don't need to add rewrites or configure redirects in vue-router/netlify.