ktquez / vue-disqus

Integrate Disqus count and comments in your application Vue 3, with support for SPA

Home Page:https://ktquez.github.io/vue-disqus/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Identifier doesn't seem to be passed, injection error (Quasar SSR + PWA)

neural-loop opened this issue · comments

<template>
  <div>
    <div class="comments">
      <Disqus v-if="showDisqus" :shortname="disqusShortname" :pageConfig="disqusPageConfig" />
    </div>
  </div>
</template>

<script>
import { Disqus } from 'vue-disqus'

export default {
  name: 'PostPage',
  props: {
    path: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    }
  },
  components: {
    Disqus
  },
  data() {
    return {
      showDisqus: false,
      disqusShortname: 'my-shortname',
      disqusPageConfig: null
    }
  },
  mounted() {
    this.loadDisqus()
  },
  methods: {
    loadDisqus() {
      // Configure the Disqus pageConfig object
      this.disqusPageConfig = {
        title: this.title,
        identifier: this.path,
      };

      // Perform any other necessary setup or configuration here
      this.showDisqus = true; // Set to true to render the Disqus component
    }
  }
}
</script>
                <PostPage :title="pagetitle sent here" :path="path sent here"/>

In my dev environment it seems to work okay, but I get

[Vue warn]: injection "Symbol(disqus)" not found. 
  at <Disqus key=0 shortname="mysite" pageConfig= 
Object { title: "my title", identifier: "/my/path" }
 > 
  at <PostPage title="my title" path="/my/path" > 
  at <QTabPanel name="about" > 
  at <QTabPanels modelValue="about" onUpdate:modelValue=fn style= 
Object { background: "transparent" }
 > 
  at <QCard class="no-shadow q-mb-sm" style= 
Object { "border-radius": "0 0.25rem 0.25rem" }
 > 
  at <QPage key=0 class="container" > 
  at <SingleModelsPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <QPageContainer style= 
Object { "min-height": "100vh" }
 > 
  at <QLayout> 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App > 
  at <AppWrapper> runtime-core.esm-bundler.js:41

When I put into production,it doesn't put the comments to the write pages, so I think the identifier isn't working properly.

ChatGPT told me it is very strange
image