Disqus still empty space with Vue 3
superdiazzz opened this issue · comments
Hi @ktquez thanks for your amazing work for vue-disqus@next. But i don't know what i missed after following steps for installing it locally. I got empty space when run in localhost and also in production.
what i did is:
<template>
<section class="comments" aria-labelledby="comment">
<h3 id="comment" class="font-semibold text-2xl">Komentar</h3>
<!-- <h3 class="text-center font-semibold text-lg mt-4 text-gray-500">Belum ada Komentar pada Post ini</h3> -->
<Disqus shortname='my-shortname-com' />
</section>
</template>
<script>
import { Disqus } from 'vue-disqus'
export default{
components: {
Disqus
}
}
</script>
if the problem comes from admin configuration, may i know what mandatory things should be filled? my admin site is here (https://skillbaru-com.disqus.com/admin)
yes i have done that
<Disqus shortname='skillbaru-com' />
but still empty
@superdiazzz
Are there any errors in the console?
@ktquez Unfortunately, no error display in my console. Maybe you can check my site. This is where i planted Disqus below "Komentar" https://skillbaru.com/blog/read/Menjadi-Pendidik-Era-digital-Bersama-Skillbaru-dan-Dapatkan-Penghasilan-Ratusan-Juta!
@ktquez that's weird, i don't get that error. are you sure that's not come from plugin adblocker
this is my console looks like when i open my article
There may be a problem with the IntersectionObserver.
You can disable it by setting the prop <Disqus shortname='skillbaru-com' :lazy="false" />
@ktquez I have tried it still doesn't work 😢
I think the problem coming from Disqus reference. If i highlighted the component it will not jump to it's definition.
it seems unrecognized
I did a test on a project from scratch with vue-cli and it is working normally.
https://vue-disqus-next.surge.sh/
@ktquez does important to install with this way too? https://skillbaru-com.disqus.com/admin/settings/universalcode/, I see don't do it before
@ktquez i saw you have a lot of disqus configuration inside header, could you tell me what important things should i use?
@superdiazzz
Disqus itself adds resources to the head.
You could test in a new project and add Disqus the same way you did on your current and see if it works.
If it works, the problem will not be with the plugin but with your current project.
@ktquez i have created new project and implement the same way, and i have same result. I think i have made same mistake but i don't know where. In new project i also didn't see head script like yours(disqus script). Does it input manually?
@superdiazzz
Can you create a repo of your test?
@superdiazzz
Can you create a repo of your test?
Of course,
this is my sample project
https://github.com/superdiazzz/Jul-Vue-Blug
i installed vue-disqus and have same problem live previous, i put disqus on Home page
I think it's your disqus setup.
With my shortname "ktquez-dev-test"
With your shortname "skillbaru-com"
This shortname i got from general Settings, there is problem here?
@ktquez If there are something you need for inspection i will help. Sorry if i bothering you
I don't really know what it might be, as your settings are correct.
Add a new site there on the disqus and start from scratch.
I don't really know what it might be, as your settings are correct.
Add a new site there on the disqus and start from scratch.
Hi @ktquez I have created new site then had same result. and i also tried your shortname it also has same result (blank space), it's weird. I don't understand, does disqus only works for premium subscriber?
Hi @ktquez hope are well, i think this warning related with disqus plugin, because whenever i comment out the script this is disappear and will appear when i implement tag <disqus :lazy=true/>
inject() can only be used inside setup() or functional components.
onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
Based on this https://stackoverflow.com/questions/64009348/why-i-got-blank-when-use-async-setup-in-vue3, we have to wrap it with Suspense for async setup(). But it should be in asyncComponent (Disqus)
@superdiazzz
VueDisqus does not use async.
This shortname i got from general Settings, there is problem here?
For local development you need to create a test shortname and not set the "Website URL" (you must leave this field blank).
For local development you need to create a test shortname and not set the "Website URL" (you must leave this field blank).
@ktquez Sorry still problem. Now, i try through CDN and i got new warning
Did you solve?
@superdiazzz hi! you should create a shortname without any dashes.. or special characters....