Search code examples
vue.jsfrontendvuepress

VuePress not rendering `<router-link>` tags


I am using VuePress (^1.0.3) for a side project, with a fairly straightforward setup. I'm not sure when this started occurring, currently the <router-link> elements don't get rendered as <a> tags, but show up as <div> (without linking functionality/interactivity). You can see what's going wrong here, for instance in the bottom menu bar items (or the space 'tiles' that should be clickable): https://new.coworkberlin.com/

My package.json looks like:

{
  "scripts": {
    "dev": "vuepress dev .",
    "build": "vuepress build ."
  },
  "devDependencies": {
    "esm": "^3.2.25"
  },
  "dependencies": {
    "@vuepress/plugin-google-analytics": "^1.0.3",
    "@vuepress/plugin-pwa": "^1.0.3",
    "axios": "^0.18.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue2-google-maps": "^0.10.6",
    "vuepress": "^1.0.3",
    "vuepress-plugin-sitemap": "^2.1.2"
  }
}

The repository for this project is github.com/ldanielswakman/cowork-berlin

Does anybody have any idea of how I might fix this?


Solution

  • I extract the relevant code, in case I can't solve your problem and you need to make your repo private again.

    I couldn't run your repo successfully and got lots of errors, so I'm not sure if this will work.

    The origin code:

    <router-link :to="'/'">
        <i v-if="!isHomePage"></i>
        <h1>
            <img :src="$withBase('/logo.svg')"/>
        </h1>
    </router-link>
    

    You can try to change it into:

    <router-link to="/">
        <i v-if="!isHomePage"></i>
        <h1>
            <img src="$withBase('/logo.svg')"/>
        </h1>
    </router-link>
    
    1. "" or '' would be enough, you do not need both of them.
    2. You do not need : either since / is not a variable, and apparently won't change.

    BTW, I also suggest you:

    1. Update Vuepress to the latest version, which is 1.2.0
    2. Take a look at your dependencies, cause I get errors while running yarn install