{"id":18989594,"url":"https://github.com/dannyfeliz/vue-tweet","last_synced_at":"2025-04-14T03:52:53.185Z","repository":{"id":39259847,"uuid":"365916032","full_name":"DannyFeliz/vue-tweet","owner":"DannyFeliz","description":"Vue 3 component that let you embed tweets in your App by only giving the tweet id","archived":false,"fork":false,"pushed_at":"2024-06-20T09:40:52.000Z","size":986,"stargazers_count":40,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T02:56:43.846Z","etag":null,"topics":["embed-tweets","twitter","typescript","vue","vue3","vue3-typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DannyFeliz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-10T04:21:12.000Z","updated_at":"2025-03-13T12:17:56.000Z","dependencies_parsed_at":"2024-06-12T01:44:39.255Z","dependency_job_id":"44a1b954-9920-4b06-81cc-ca372b5439d7","html_url":"https://github.com/DannyFeliz/vue-tweet","commit_stats":{"total_commits":85,"total_committers":2,"mean_commits":42.5,"dds":"0.14117647058823535","last_synced_commit":"f50439c0c2f990d0b2e92ec7a65b84a005bcb3c9"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyFeliz%2Fvue-tweet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyFeliz%2Fvue-tweet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyFeliz%2Fvue-tweet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DannyFeliz%2Fvue-tweet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DannyFeliz","download_url":"https://codeload.github.com/DannyFeliz/vue-tweet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819359,"owners_count":21166474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["embed-tweets","twitter","typescript","vue","vue3","vue3-typescript","vuejs"],"created_at":"2024-11-08T17:07:06.707Z","updated_at":"2025-04-14T03:52:53.162Z","avatar_url":"https://github.com/DannyFeliz.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-tweet\n\nVue 3 component that lets you embed tweets in your App by only giving the tweet id\n\n[\u003cimg src=\"https://img.shields.io/npm/dt/vue-tweet.svg\"\u003e](https://www.npmjs.com/package/vue-tweet)\n[\u003cimg src=\"https://img.shields.io/npm/v/vue-tweet.svg\"\u003e](https://www.npmjs.com/package/vue-tweet)\n\n## Demo\n\n[![Edit Vue Tweet](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41)\n\n[![Preview](https://github.com/DannyFeliz/vue-tweet/assets/5460365/ec8116cb-9c9f-49a0-bd01-33419907b239)](https://codesandbox.io/p/devbox/vue-tweet-demo-r2rvr8?file=%2Fsrc%2FApp.vue%3A6%2C41)\n\n## Installation\n\n```bash\nnpm install vue-tweet --save\n\n# or with yarn\n\nyarn add vue-tweet\n```\n\n## Usage\n\n```vue\n\u003cscript setup\u003e\nimport Tweet from \"vue-tweet\";\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTweet tweet-id=\"1530240085807054848\" /\u003e\n\u003c/template\u003e\n```\n\nOr using a tweet URL\n\n```vue\n\u003cscript setup\u003e\nimport Tweet from \"vue-tweet\";\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTweet\n    tweet-url=\"https://x.com/DannyFeliz08/status/1530240085807054848\"\n  /\u003e\n\u003c/template\u003e\n```\n\n# Props - [Embedded Tweet parameter reference](https://developer.x.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference)\n\n### Note: You must provide either `tweet-id` or `tweet-url`.\n\n**tweet-id**\n\nType: `string`\n\nDefault: `''`\n\nThe numerical ID of the desired Tweet.\n\n\u003chr /\u003e\n\n**tweet-url**\n\nType: `string`\n\nDefault: `''`\n\nThe Tweet URL.\n\n\u003chr /\u003e\n\n**cards**\n\nType: `string`\n\nDefault: `\"visible\"`\n\nValues: `\"visible\" | \"hidden\"`\n\nWhen set to hidden, links in a Tweet are not expanded to photo, video, or link previews.\n\n\u003chr /\u003e\n\n**conversation**\n\nType: `string`\n\nDefault: `\"all\"`\n\nValues: `\"all\" | \"none\"`\n\nWhen set to none, only the cited Tweet will be displayed even if it is in reply to another Tweet.\n\n\u003chr /\u003e\n\n**theme**\n\nType: `string`\n\nDefault: `\"light\"`\n\nValues: `\"light\" | \"dark\"`\n\nWhen set to dark, displays Tweet with light text over a dark background.\n\n\u003chr /\u003e\n\n**width**\n\nType: `string | number`\n\nDefault: `\"auto\"`\n\nValues: `\"auto\" | number`\n\nThe maximum width of the rendered Tweet in whole pixels. This value should be between `250` and `550` pixels.\n\n\u003chr /\u003e\n\n**align**\n\nType: `string | undefined`\n\nDefault: `undefined`\n\nValues: `\"left\" | \"right\" | \"center\" | undefined`\n\nFloat the Tweet left, right, or center relative to its container. Typically set to allow text or other content to wrap around the Tweet.\n\n\u003chr /\u003e\n\n**lang**\n\nType: `string`\n\nDefault: `en`\n\nValues: `\"ar\" | \"bn\" | \"cs\" | \"da\" | \"de\" | \"el\" | \"en\" | \"es\" | \"fa\" | \"fi\" | \"fil\" | \"fr\" | \"he\" | \"hi\" | \"hu\" | \"id\" | \"it\" | \"ja\" | \"ko\" | \"msa\" | \"nl\" | \"no\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"sv\" | \"th\" | \"tr\" | \"uk\" | \"ur\" | \"vi\" | \"zh-cn\" | \"zh-tw\"`\n\nA supported Twitter language code. Loads text components in the specified language. Note: does not affect the text of the cited Tweet.\n\n\u003chr /\u003e\n\n**dnt**\n\nType: `boolean`\n\nDefault: `false`\n\nWhen set to true, the Tweet and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads.\n\n# Events\n\n**tweet-load-success**\n\nType: `HTMLElement`\n\nAttributes: `(embedHtmlNode)`\n\nEmitted after successfully load the tweet.\n\n\u003chr /\u003e\n\n**tweet-load-error**\n\nEmitted after an error occurs while trying to get the tweet\n\n# Slots\n\n**loading**\n\nSlot for custom loading state.\n\n```vue\n\u003cTweet tweetId=\"20\"\u003e\n    \u003ctemplate v-slot:loading\u003e\n      \u003cspan\u003eLoading...\u003c/span\u003e\n    \u003c/template\u003e\n\u003c/Tweet\u003e\n```\n\n\u003chr /\u003e\n\n**error**\n\nSlot for custom error state.\n\n```vue\n\u003cTweet tweetId=\"20\"\u003e\n    \u003ctemplate v-slot:error\u003e\n      \u003cspan\u003eSorry, that tweet doesn't exist!\u003c/span\u003e\n    \u003c/template\u003e\n\u003c/Tweet\u003e\n```\n\n## Development setup\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```\nnpm run dev\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build\n```\n\n### Locally preview production build\n\n```\nnpm run serve\n```\n\n## Recommended IDE Setup\n\n[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!\n\n### Customize configuration\n\nSee [Configuration Reference](https://vitejs.dev/guide/#command-line-interface).\n\n# Contributing\n\n1. Fork it (\u003chttps://github.com/dannyfeliz/vue-tweet/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am \"Add some fooBar\"`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannyfeliz%2Fvue-tweet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdannyfeliz%2Fvue-tweet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdannyfeliz%2Fvue-tweet/lists"}