Twitter Gallery (based on Vue.js) is using Twitter Official API to fetch media

by Vue.js Examples

Twitter Gallery

Twitter Gallery (based on Vue.js) is using Twitter Official API to fetch media (photos and videos) from a Twitter Profile and then display it in a masonry gallery layout.

Demo Preview (Images)

You will need to create an app in Twitter Developer Portal and get Bearer Token.

Features:

  • Search Photos
  • Search Videos
  • Preview Large Image or Video in Lightbox
  • Play Video in ArtPlayer or Native HTML5 Player
  • Open Image in New Tab for Full View, Save Image, Zoom-in, Zoom-out, Rotate

Requirement

Node.js for development & build

Project setup

  • Create an App in Twitter Developer Portal
  • Generate Bearer Token
  • Clone the Repository
  • Add Bearer Token in .env file. e.g. VUE_APP_TWITTER_TOKEN=AAAAAAToken.....
  • Run npm install or yarn add in Terminal to add all dependencies
  • Run npm run serve or yarn serve for Compiles and hot-reload for development
  • Run npm run build or yarn build for Compiles and minifies for production

Customize configuration

See Configuration Reference & Vue.js documentation.

GitHub

View Github