[bastianhilton]

I would like to know how to integrate Commentics iframe with Nuxt or Vuejs

this is my code so far

Code:

<template>
    <div id="commentics">
      <!-- Commentics will load here -->
    </div>
  </template>
 
  <script setup>
  import { onMounted } from 'vue';
  import { useRuntimeConfig } from '#app'; // Import useRuntimeConfig to access environment variables
 
  const config = useRuntimeConfig();
 
  onMounted(() => {
    if (process.client) {
      // Load Commentics iframe for client-side rendering
      const commenticsContainer = document.getElementById('commentics');
      const iframe = document.createElement('iframe');
 
      // Use the commentsUrl from the config
      iframe.src = config.public.commentsUrl; // Fetch the URL from public config
 
      iframe.width = '100%';
      iframe.height = '600px'; // Adjust the height as needed
      iframe.frameBorder = '0';
      iframe.scrolling = 'no';
 
      commenticsContainer.appendChild(iframe);
    }
  });
  </script>
 
  <style scoped>
  /* Optional: style adjustments for the iframe */
  iframe {
    width: 100%;
    height: 100%;
  }
  </style>
 

The config.public.commentsUrl is linked to my .env file with the url to the embed like this http://your-domain.com/comments/embed.js

I get Forbidden

You don't have permissions to access this folder where the iframe is supposed to be

[Steven]

I'm not familiar with Nuxt and Vuejs but basically you need to load the embed.js file as a script rather than setting it as the source of the iframe. The reason is that the embed.js file creates the iframe and is responsible for managing the responsiveness of it. If it's a single-page application that you have, you may just have to load the embed.js file on every page.

Code:

<script src="http://your-domain.com/comments/embed.js"></script>

If you have no other choice, I suppose you could try copying the code from embed.js into your <script setup> tag and then hardcode the "var commentics_url" line to http://your-domain.com/comments/