CODEWITHSUNDEEP
vue.jsfrontendvuepress
L Daniel Swakman
L Daniel Swakman

Reputation: 53

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?

Upvotes: 0

Views: 493

Answers (2)

L Daniel Swakman
L Daniel Swakman

Reputation: 53

The solution turned out to not only do minor version updates via yarn upgrade but also 'manually' update VuePress to the latest version (1.2.0) — that solved the issue.

Upvotes: 0

Sun Haoran
Sun Haoran

Reputation: 536

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

Upvotes: 1

Related Questions