Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bhalliburton's avatar

How to embed tweets in a page?

I am using Laravel Spark and attempting to install this package:

https://www.npmjs.com/package/vue-tweet-embed

I must confess, I have absolutely no idea where to include the import or what I need to do after I install vue-tweet-embed - I assume I need to recompile something?

Sorry for such a naive, newb question, but I am really at a loss.

0 likes
3 replies
ejdelmonico's avatar

I will assume you only want to use these components in a particular page view. My suggestion would be to use a standard ES6 import statement that destructs the objects you are going to use from the package. Go to your project root and run npm install vue-tweet-embed or yarn ... if using it. Then, in the script tag of your component and above the export default you can use import { Tweet, Moment, Timeline } from 'vue-tweet-embed' (or whatever objects you are using from the package). Now, you have access to Tweet, Moment, and Timeline in your component.

bhalliburton's avatar

Sorry to be dense, but I have very little Vue experience.

So if I just wanted to put a block on the default dashboard page, I don't see an export default block in something like home.js. What do I do?

Also, I assume I am supposed to "npm run dev" after I do all this?

ejdelmonico's avatar

Are you trying to modify one of the Spark templates provided from the framework? You don't have to use those that are not in the spark directories. I am not a fan of the way Taylor used Vue in Spark but it is a heavily opinionated offering so that is just the way he does it. So, he provides a home.js file in the components directory. In that file, he constructing a component and registering it at the same time (not a fan of that but anywho). So, it is not a view component but a functional one so you two choices: you can build off of that and use Blade for the view or you can ignore it and make a single file Vue component...which I recommend if you are not going to use his vast supply of confusing mixins (again not a fan of those either).

If it were me, I would opt for the single file component. The basic template is:

<template>
  <div>Your html goes here</div>
</template>

<script>
  import {Tweet, Moment, Timeline} from 'vue-tweet-embed';

  export default {
    name: 'YourFancyComponent',
    components: {
    },
    ....
  }
</script>

<style scoped>
  /* Your scoped or non-scoped styles here */
</style>

Please or to participate in this conversation.