How to add Twitter Timeline

[stritti]

Hello,

I would like to add a twitter timeline to my vuepress pages. How could that be managed?

Following I already tried:

• I added additional dependecies for @vuepress/plugin-register-components and vue-tweet-embed to package.json:

    "devDependencies": {
       "@vuepress/plugin-register-components": "^2.0.0-beta.29",
       "vue-tweet-embed": "^2.4.0",
       "vuepress": "^2.0.0-beta.29"
     },
     "dependencies": {
       "vue-tweet-embed": "^2.4.0"
     }

• added clientAppenhance.js to .vuepress directory:

   import { defineClientAppEnhance } from '@vuepress/client'
   import { Timeline } from 'vue-tweet-embed'
   
   export default defineClientAppEnhance(({ app, router, siteData }) => {
     app.component('Timeline', Timeline)
   }) 

• and added timeline to my Readme.md:

  <timeline id="twitterdev" sourceType="profile" :options="{ tweetLimit: '10' }" />

But it does not be rendered.
Any ideas or suggestions?

[meteorlxy]

Seems that vue-tweet-embed does not support vue 3

[stritti]

Hm, yes could be the issue @meteorlxy.

[stritti]

I extracted the timeline part of https://github.com/tonickkozlov/vue-tweet-embed/ to an internal vuepress component, which works now for me:

docs/.vuepress/components/TwitterTimeline.vue

 <template>
  <div id="twitter-timeline"></div>
</template>

<script>
export default {
  name: "TwitterTimeline",
  props: {
    id: {
      type: String,
      required: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      addScriptPromise: null,
      isLoaded: false,
      isAvailable: false,
    };
  },
  mounted() {
    const params = { sourceType: "profile", screenName: this.id };
    Promise.resolve(
      window.twttr
        ? window.twttr
        : this.addPlatformScript("//platform.twitter.com/widgets.js")
    )
      .then((twttr) => {
        if (document.getElementsByTagName("HTML")[0].className.indexOf("dark") > -1) {
          this.options.theme = "dark";
        }
        this.embedComponent(twttr, params, this.$el, this.options);
      })
      .then((data) => {
        this.isAvailable = data !== undefined;
        this.isLoaded = true;
      });
  },
  methods: {
    embedComponent(twttr, ...args) {
      return twttr.widgets.createTimeline(...args);
    },
    addPlatformScript(src) {
      if (!this.addScriptPromise) {
        const s = document.createElement("script");
        s.setAttribute("src", src);
        document.body.appendChild(s);
        this.addScriptPromise = new Promise((resolve) => {
          s.onload = () => {
            resolve(window.twttr);
          };
        });
      }
      return this.addScriptPromise;
    },
  },
  render(h) {
    if (this.isLoaded && this.isAvailable) {
      return h("div", { class: this.$props.widgetClass });
    }

    if (this.isLoaded && !this.isAvailable && this.$props.errorMessage) {
      const $errorMsg = h("div", {
        class: this.$props.errorMessageClass,
        domProps: {
          innerHTML: this.$props.errorMessage,
        },
      });
      return h("div", [$errorMsg]);
    }

    return h("div", { class: this.$props.widgetClass }, this.$slots.default);
  },
};
</script>