在NUXT中使用Embed.js

Question

我需要在NUXT中使用oEmbed。如何在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()

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

Answer 1

这个答案是在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)
}