Introduction to my Vue.js Guide
To start my foray into Vue I decided to make a simple ‘Joke Generator’ single page application using reddit’s /r/jokes subreddit to get the JSON (protip: simply by adding .json to any reddit page you can obtain the json www.reddit.com/r/joke.json). I then parse the JSON into an array with objects that have Joke, Punchline, Author and Source elements. Finally, I allow the user to iterate through the jokes with a simple button. You can check it out here: https://github.com/mikhail-karan/vue-joke-generator
After this project I got really interested in the styled component part of Vue.js and was trying to get some inspiration from some free graphics sites.
These hexagons gave me the idea that each one can be a separate styled Vue.js Component with different functionality. With that I can then create a tutorial/guide for people just starting off with Vue.js, especially using styled components.
I’ll cover these topics in a few separate upcoming articles:
- Project setup
- Breakdown of what is a styled component
- Passing in properties and using them within components
- Declaring and using Methods
- Using the Lifecycle Hooks like ‘created()’
- Vuex for global state storage
- Vue-resource for http requests and pulling in data
The reason I’ll be breaking this up into separate articles is I want to go into as much depth as I think is reasonable for each part of the Vue.js framework. I also want to expand this as I myself discover new features and can bring more knowledge into these guides. So even though the list above stops at Vue-resource I’ll definitely be adding to it as I learn.
Here is a sneak peak at what we’ll all learn to build together:
