Building a Twitter clone with Vue.js using 0 configuration — Part 1

This website moved to a new home!

Vue was released in 2014. Since that time I was thinking: ‘Yeah, just another JS framework to reinvent the wheel.’ But since last year it started to get more popular and got my attention. After the initial reading, I thought it is worth a try to see if it has something to say to solve the downsides of React or Angular.

Also lately a discussion became popular that Vue won the star war on Github ⭐️ for JS projects which is cool. But at the same time that doesn’t reflect the actual popularity in the current JS market although adopting Vue is increasing.

So I wanted to play around with Vue; therefore I sat a challenge to build a Twitter clone in Vue with no configuration to create a timeline for some of the best writers I like. So I started reading about Vue and will share here what I have learned and some ideas.

The first thing you notice when you start working with Vue it’s easy to kick-start, and easy to maintain. It has two ways data binding which reminds me of Angular 1.x and and a component-based system is inspired by React made satisfying combination. Regarding that in the documentation:-

On a higher level, we can divide components into two categories: presentational ones and logical ones. We recommend using templates for presentational components and render function / JSX for logical ones. The percentage of these components depends on the type of app you are building, but in general we find presentational ones to be much more common.

In Vue documentation, there is also a comparison between it and other main JS frameworks. You can find it here for more information.

The challenge was possible because Vue doesn’t require any build processes. Just like Jquery old days. Speaking of Jquey, There were some discussions around that Vue is the new jquery. But I don’t see it as a right comparison since Jquery focused on a specific need to make it easier to manipulate the DOM, but Vue or any other modern JS framework is a different story as it has also state management and routing, etc. to build entire Frontend application.

In fact, it wasn’t 0 configuration as I aimed for because I needed to add a local HTTP server to make it better for loading components. But I tried to keep the balance between showing Vue features without the need to add extra libraries as much I could resist 🙂.

Vue App

To start Vue app. you need to include a CDN version and initialize a new instance.

Components loading

To be able to make separate component and having a better-structured application I found a useful loader http-vue-loader.

Routing

In the last example that we have defined two routes /home and /addTweet which is using Vue routing. And routing link will look like:

Router link

State management

You can consider different solutions for state management, but in my case, I didn’t need additional solutions and was enough to define store variable and append it to Vue app data property as mentioned before.

In general, I find it a good idea to separate state management files, and only to allow modifying throw actions functions to make it clear where to look in the future, that makes state maintainability way easier especially when the app grows — and it will.

Then we can call store action to add new Tweet:

Component structure

Vue single file component usually includes three tags:-

• Vue-HTML <template />
• <script />
• <style />

By default, you can use Vue-HTML templates. Which I prefer but if you prefer to use JSX syntax that’s also possible.

Modern JS frameworks which built on components based systems “including Vue” it supports the idea of having CSS styles in the same component file. I’m not a big fan of this approach especially in case of bigger components. But for feed.vue wasn’t a big issue since it’s relatively small.

methods vs. computed

One of the things that weren’t clear for me, in the beginning, was the fact that Vue has two similar ways to write the app logic. So you can write methods or computed functions.

So what’s the difference? 🤔

As mentioned in css-tricks article:-

Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object — typically the Vue instance itself or a Vue component.

Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use data to track changes to a particular property that we’d like to be reactive. Computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies. You can consider computed properties another view into your data.

If you like to see a live demo of the app you can find it here.

And for the full code example on GitHub.

In the next episodes

• Best practices for building a better Vue app
• A real-world data source
• More advanced state management using Vuex

So feel free to share your ideas and recommendations to improve or more features you want me to write about 😉

Finally, if you liked the post, share it and spread the word 📡 😉