Discourse comments in Vuejs

Dev
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.

3 Likes
4

I had the same issue and after some tinkering here’s a possible solution for single page applications: How To: Embedding Discourse Comments in your Blog running as a Single Page Application (Angular, Vue, React etc.)

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.