Use Embed.js in NUXT

Question

I need to use oEmbed in NUXT. How to use this plugin called Embed.js in NUXT? This is from their GitHub:

 // You need to use plugins or presets to do anything. By default embed-js does nothing. Let's assume that the HTML structure is as written below
    
    <div id="element">
       <!--===== your string here =======-->
    </div>
    // Creating an instance of embed.js
    
    import EmbedJS from 'embed-js'
    import url from 'embed-plugin-url'
    import emoji from 'embed-plugin-emoji'
    
    const x = new EmbedJS({
      input: document.getElementById('element'),
      plugins: [
        url(),
        emoji()
      ]
    })
    </div>
    // Next step is replacing the original text with the processed text.
    
    //Render the result
    x.render();
   </div>
    //  There may be cases where you just want the processed string to use it according to your need. You can get it by the following method. This can be used on the server side to get the string. Still if the plugin involves interactions, you will have to load it on the client side.
    // Get the resulting string
    x.text().then(({ result }) => {
      console.log(result); //The resulting string
    })
   </div>

    //  If you wan't to destroy the instance. It will also replace the processed string with the original string.
    
    //Destroy the instance
    x.destroy()

I already added the Embed.js file to the plugins folder of NUXT but I'm stuck on how to generate the component.

What did you tried so far? Hi, did my answer helped somehow? — kissu, Jun 06 '21 at 18:18
@kissu Thanks for your answer. I didn't tried your example because I found this Vue component based on embed.js. https://github.com/Gomah/vue-embed I can't get the examples to work though (maybe outdated?) — Tom, Jun 06 '21 at 20:05

score 0 · Answer 1 · answered Jun 04 '21 at 13:30

This answer is a good start to implement something not vue friendly in a Nuxt plugin: https://stackoverflow.com/a/67827042/8816585

Something like may work (I do have small experience with it so not sure)

import EmbedJS from 'embed-js'
import url from 'embed-plugin-url'
import emoji from 'embed-plugin-emoji'

export default ({ app }, inject) => {
  inject('embed', new EmbedJS({
      plugins: [
        url(),
        emoji()
      ]
  }))
}

async mounted() {
  $embed.input = document.getElementById('element') // maybe try this one as hardcoded in the plugin at first
  const { result } = await $embed.text()
  console.log('result', result)
}

Use Embed.js in NUXT

1 Answers1