[Question] Comments don't update on page change in SPA

[ryannmedina]

Environment

• Vssue Version: 1.4.3 (vuepress plugin)
• Platform: GitHub V3
• OS: Windows 10 (Surface Pro)
• Browser: Chrome 80

What's your question?

We have Vssue installed and working within Vuepress. Vssue picks up the initial page (landing page) and linked issue/comments. However, when navigating to different pages the comments remain the same. They don't update while navigating through. If the page is refreshed the appropriate linked issue/comments appear. Assuming this has something to do with the SPA implementation.

Is there some setting we're missing?

[meteorlxy]

Could you please provide a reproduce repo & link?

[ryannmedina]

Hi @meteorlxy! Here is the repo. Also, we updated to GitHub V4 since the question.

Configuration (repo)

...
    // Vssue (uses github issues to comment)
    "@vssue/vuepress-plugin-vssue": {
      platform: "github-v4", // set `platform` rather than `api`
      owner: "zumasys",
      repo: "docs",
      clientId: process.env.VUE_APP_GITHUB_CLIENT_ID,
      clientSecret: process.env.VUE_APP_GITHUB_CLIENT_SECRET,
      admins: ["ryannmedina", "itsxallwater"],
      issueContent: ({ options, url }) => {
        var domains = ["http://localhost:8800", "https://docs.zumasys.com"];
        var relative = url;

        for (var i = 0; i < domains.length; i++) {
          if (relative.includes(domains[i]))
            relative = relative.replace(domains[i], "");
        }

        return `This issue is auto created by Vssue to store comments of this page: ${relative}`;
      }
    },
...

Implementation (repo):

...
      <PageEdit />

      <Vssue />

    <PageNav v-bind="{ sidebarItems }" />
...

Examples from the production build

• Thread, Comment & Corresponding Issue
  • Thread & Corresponding Issue

[meteorlxy]

Uh I got the reason.

By default, vssue uses document.title as the issue title, but does not "watch" it.

If you navigate directly from one <Page> to another, vue won't re-create the <Vssue /> component, as vue thinks <Vssue /> does not change at all.

So if you navigate like: Page -> Home -> Another Page, things work well, too.

---

Some suggestions:

• Add key on <Vssue /> to help vue knows that they are different instances. E.g.

  <Vssue :key="$route.path" />

• Or, set title explicitly. E.g.

  <Vssue :title="$title" />

Thanks for report. I'll add some tips in our docs.

---

BTW, your repo is soooooo huge 😅 I just remember it's you guys who opened some performance issue in vuepress repo.

[itsxallwater]

You're damn right we did ;) I'm still proud of the worker thread workaround, even if it wasn't adopted! Took our build times down to mere minutes hehe

[itsxallwater]

Also, thanks for the clarity @meteorlxy! Like I mentioned in my other ticket, we love what y'all are doing. Please keep it up and we'll keep eyes on opportunity to help chip in!

[ryannmedina]

Haha! Yep, that's @itsxallwater for sure. Thanks for you help @meteorlxy! You guys are doing great work!