在 NUXT 中使用 Embed.js

如何解决在 NUXT 中使用 Embed.js

我需要在 oEmbed 中使用 NUXT。如何在NUXT中使用这个名为Embed.js的插件？ 这是来自他们的 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()

我已经将 Embed.js 文件添加到 NUXT 的 plugins 文件夹中，但我一直在纠结如何生成组件。

解决方法

这个答案是在 Nuxt 插件中实现对 vue 不友好的东西的良好开端：https://stackoverflow.com/a/67827042/8816585

类似的东西可能有用（我确实有一点经验所以不确定）

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)
}