Discourse comments in Vuejs

Development

AI-generated summary

The discussion revolves around embedding Discourse comments in a Vuejs application. The initial attempt by ahab4ik resulted in errors due to Vuejs’ restriction on using JavaScript files from external domains. eviltrout explained that the provided embedding code is meant for static sites, not client-side rendered (SPAs) like Vuejs. Instead, they suggested using the Discourse API and proxying it through the user’s own server to avoid cross-domain requests. MK2k shared a possible solution for single-page applications, providing a link to a meta discussion on the topic: https://meta.discourse.org/t/how-to-embedding-discourse-comments-in-your-blog-running-as-a-single-page-application-angular-vue-react-etc/231798.

1

I have a website that uses Vuejs. And a forum in Discourse. I am trying to insert a javascript in the template file that will connect comments from the forum to a specific page on Vuejs site. But I get the error:

Templates should only be responsible for mapping the state to the UI. 
Avoid placing tags with side-effects in your templates, such as <script>, 
as they will not be parsed.

I was try change text/javascript to application/javascript , but when i try render it, i receive error:

 - invalid expression: missing ) after argument list in

" \n  DiscourseEmbed = { discourseUrl: 'https://forum.epicseven.ru/',\n                     
discourseEmbedUrl: '"+_s(url absolute="true")+"' };\n\n  (function() {\n    
var d = document.createElement('script'); d.type = 
'application/javascript'; d.async = true;\n    d.src = 
DiscourseEmbed.discourseUrl + 'javascripts/embed.js';\n    
(document.getElementsByTagName('head')[0] || 
document.getElementsByTagName('body')[0]).appendChild(d);\n  })();\n"

  Raw expression: DiscourseEmbed = { discourseUrl: 
'https://forum.epicseven.ru/',
                 discourseEmbedUrl: '{{url absolute="true"}}' };

  (function() {
    var d = document.createElement('script'); d.type = 
'application/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || 
document.getElementsByTagName('body')[0]).appendChild(d);
  })();

As I understand it, the use of js files in Vuejs is allowed only from the domain from which the call originates. And my forum is set to subdomainю

How i can fix this error? Maybe try to use different part of code?

2

The embedding code we provide is meant for static sites, not client side rendered (SPAs) like Vue/React/Ember/Angular.

You will have to look into another method of obtaining the data from Discourse. We do offer a full API but you might have to proxy it through your own server to avoid cross domain requests.

4

I had the same issue and after some tinkering here’s a possible solution for single page applications: Embed comments from Discourse in your single page app