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:
- Setup project + Call Twitter search API methods (This video)
- Authenticate users using oauth + Render personal timeline
- Post tweets, retweet and replies
- Deploy as native app using Phonegap/Cordova
Enjoy the video series! :-)
Source code
- Episode 01: https://github.com/valnub/Twitvue-Episode-01
- Episode 02: http://github.com/valnub/Twitvue02
- Episode 03: https://github.com/valnub/twitvue03
- Episode 04: https://github.com/valnub/Twitvue04
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 ?
@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.
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?
@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.
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!
@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.
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.
@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.
Hello Timo!!
Your tutorial is awesome man! Thank you very much man!
I am using your code from the Episode4.
I am using Nodejs 9.2.0 and I tryed to upgrade the packages to be up to date with everything. But I am getting a few errors and I can’t find a solution. The first error was:
1) ERROR in build.js from UglifyJs
With a little research I saw uglify and does not work with ES6. So to fix that I would need to install babel-preset-es2015 and use it on webpack.config.js:
{
test: /.js$/,
loader: ‘babel-loader’,
exclude: /node_modules/,
options: {
presets: [‘es2015’]
}
},
This error was fixed, but the error is back!! I am confused now.
2) When I solved the error above, another error came up: Module build failed: SyntaxError: Unexpected token (1:0)
It seems that this error was related with babel as well, but I could not find a solution for that.
My package.json is like this:
{
“name”: “twitvue”,
“description”: “A Vue.js project with Framework7”,
“author”: “valnub”,
“private”: true,
“scripts”: {
“dev”: “cross-env NODE_ENV=development webpack-dev-server –inline –hot”,
“build”: “cross-env NODE_ENV=production webpack –progress –hide-modules”
},
“dependencies”: {
“codebird”: “^2.6.0”,
“framework7-vue”: “^0.9.4”,
“vue”: “^2.0.1”
},
“devDependencies”: {
“babel-core”: “^6.0.0”,
“babel-loader”: “^7.1.2”,
“babel-preset-es2015”: “^6.0.0”,
“cross-env”: “^5.1.1”,
“css-loader”: “^0.28.7”,
“file-loader”: “^1.1.5”,
“jade”: “^1.11.0”,
“node-sass”: “^4.1.1”,
“sass-loader”: “^6.0.6”,
“vue-loader”: “^13.5.0”,
“vue-template-compiler”: “^2.0.0”,
“webpack”: “^3.10.0”,
“webpack-dev-server”: “^2.1.0-beta.0”
}
}
I am also getting a lot of warnings saying:
: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
So now I have this on home.vue:
f7-list-item(v-on:click=’onClick(tweet)’, link=’/tweet/’, v-for=’tweet in tweets’, :key=’tweet.id’, :media=’tweet.user.profile_image_html’, :title=’tweet.user.name’, :subtitle=’tweet.user.screen_name_at’, :text=’tweet.text’)
with :key=’tweet.id’ inserted.
It is a little mess here!! But I think your way of thinking might be one of the best around development with Phonegap + Vuejs.
Please help me get your code running on the most possible up to date package list?
Another question, last but not least, what Nodejs version are you using on you Episode4?
Thank you very much!!!
Your tutorial is awesome Timo!
Thank you very much!
What nodejs version you are using for this demo? I have a few (a lot!) issues when trying to work with the nodejs 9.2.0, and trying to upgrade all packages.
So I am trying again with version 7.10.1.
@Gustavo Did you try these templates?
F7 + Vue + Webpack (Official Template from F7 Team)
https://github.com/framework7io/Framework7-Vue-Webpack-Template
F7 v2 (new!)
https://github.com/framework7io/framework7-template-single-view
Hey Timo man!!
I tryed the first one. The new one not yet!
I’ve reached a partial success!! I am using node 7.10.1 and I could install the app on my android. I am unable to develop for iphone now.
So the app installed ok!! But the data from timeline never loads. Its an infinite loop!
Can you point me in a direction to translate the app to Android?
Thank you very much!!!
@Gustavo Hi, I don’t know your code, so I cannot really help you, thus I recommend you do this:
There are lots of good devs on that forum, I’m sure someone can help.