Вы когда-нибудь хотели встроить твиты в свой проект 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>— 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 должно скомпилироваться без ошибок. 🙂
Надеюсь, это поможет кому-то!