Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap

In my last post I showed you how to kick-off a new project with Framework7, VueJS and Webpack. So, I thought in the next video I could show you a real-world example on how to create an app based on these technologies.

In this screencast we will create a Twitter client for iOS and Android that will let you search for tweets through the official Twitter REST API.

Keep in mind that this is the first episode of a series since we won’t be able to create a full Twitter app in only one episode. Instead, we will cover one topic in each video. The series topics will probably look something like this:

  1. Setup project + Call Twitter search API methods (This video)
  2. Authenticate users using oauth + Render personal timeline
  3. Post tweets, retweet and replies
  4. Deploy as native app using Phonegap/Cordova

Enjoy the video series! :-)

Source code

8 thoughts on “Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap

  1. Hello again Timo,
    i’m starting right now to use framework7 and vue, following your serie. But when i try to run “npm run dev”, i get some errors like “Module not found: Error: Can’t resolve vue-loader/lib/component-normalizer”. There’s something that i can do to fix this ?

  2. @Matteo De Prezzo Yes, I think this is because of an outdated npm package. I’ll look into this and post an update to Github.

  3. CV says:

    Thanks! I’ll be building this for a class assignment. The tutorial we were given was from 2012. I know JS but not Vue yet, now would be a good time to learn it. BUT, this tutorial might be too current for me to learn/make in three fractioned days. What would you say?

  4. @CV I recommend to simply get started with your project. Learning by doing is the best way to go in my opinion. Three days could be a bit tough though. Depends on how big your assignment is, I’d say.

  5. Brandon says:

    I’m new to Framework7 and Vue and I’m trying to figure out how to integrate my existing app which is intended to display a set of data as a list and sort it based on a selected option from a dropdown search. My problem with this example is I’m not finding where the data is loaded into ‘store.js’ which appears to be the Tweet data model. It appears this was intended to be a specific set of tweet data and not all tweets related to a users account, but if I got that wrong I apologize.

    Also, apologies if this is addressed in the video. I’m not currently able to watch it but will try to later. Also, given the description of my above app, would it be feasible/easier to implement that without involving Node and other frameworks like Webpack etc? Just plain Vue and Framework7? On a deadline and trying to not get involved with more frameworks if I don’t have to. Thanks for any help!

  6. @Brandon

    The code to add the data to the store is in home.vue:

    store.tweets = result;

    Using Webpack is optional of course but definitely useful.

    Node isn’t used (except for NPM) so I don’t get your last question.

    I recommend to watch the videos if you’re not certain.

  7. Brandon says:

    Apologies, I more meant using things like Webpack, Browserfy, or Vueify… also not using npm currently. Just using PhoneGap Desktop and Build. Asking if it’s simple enough to not have to integrate with those.

  8. @Brandon

    Hi, I don’t know your project, code or knowledge, so I can’t give any advice on that. All the frameworks/libs you mentioned are not mandatory. I recommend to give them a try if you want and see what works best for you.

Leave a Reply