Вы когда-нибудь хотели встроить твиты в свой проект Vue? Вот один из способов сделать это.

Пример твита, который можно встроить в документ HTML.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Take on university with the power of Mac. And rule school from the classroom to your dorm room and everywhere in between.</p>&mdash; Apple (@Apple) <a href="https://twitter.com/Apple/status/1415673170196013057?ref_src=twsrc%5Etfw">July 15, 2021</a></blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Если вы попытаетесь скопировать и вставить этот код в компонент .vue, вы получите ошибку компиляции из-за тегов script.

Обратите внимание, что widget.js является обязательной зависимостью для встроенных твитов.

К счастью, в NPM есть пакет-оболочка, который позволяет динамически загружать скрипт виджета Twitter. Его можно установить в существующий проект Vue 2/Vue 3 следующим образом:

npm i twitter-widgets

Теперь вы можете встроить твит, вставив часть ‹blockquote› HTML-кода в теги ‹template› и загрузив соответствующую зависимость в часть ‹script› компонента Vue.

<template>
 <blockquote class="twitter-tweet">....</blockquote>
</template>
<script>
var TwitterWidgetsLoader = require('twitter-widgets');
export default {
 mounted() {
  TwitterWidgetsLoader.load();
 }
}
</script>

Теперь ваше приложение Vue должно скомпилироваться без ошибок. 🙂

Надеюсь, это поможет кому-то!