The Vue architecture that worked for me. (in small and large apps)

Eder Negrete
Oct 9, 2017 · 5 min read
Image for post
Image for post
source: http://blog.stunited.org

Hi, I want to share with you the way that I’ve been working on Vue.js. Some of the practices that have worked for me, this can actually fit on a lot of frameworks (some parts), like React.js, Polymer or Angular.

1.- Components

Some of the rules that I follow to develop a component:
• They must be “dummy”. They must follow the single responsibility principle. This means that your component should only to his job and thats it, it should be prepare to accept data from a parent. Example: a table must sort the data in columns and rows depending on the data passed from
it’s parent.

• They shouldn’t interact with the “outside”, directly. The only way to do this is with events.
• They should be independent. This means that they should and must work by they own. They’re not
tied to a specific architecture or forced to have a store, etc.
• They must be reusable
• They must be able to be styled from the ‘outside’
• They must have only the necessary logic.

1.2.- The gold rule:

Image for post
Image for post
source: https://vuejs.org/

1.3.- State of the components
When we create a component we should have in mind this four states:

  1. Loading
  2. Success
  3. Empty (edit, advise from Loki Zavala)
  4. Error

1.4.- Not everything is a component
We should avoid create a very small component. This is to avoid the overload of components/dependencies on our project. Example: a link with an icon

1.5 .-Communication between components?
Vue doesn’t allow us to communicate between nested components (without doing a callback hell) the ones that are in different pages. Out there are a lot of different approaches to do this, here’s an example: https://www.npmjs.com/package/vue-bus

2.- Page as models

3.- Modular Code (divide and conquer, for real though).

3.1.- When to create a module
If you see yourself repeating a configuration or a code in different places you should create a module for it.

A case of a module: Let’s say we are using axios to call the api, and we need to make 30 calls all along our app, in this case we can create a module that has all the logic to make a call to the api, it can accept every parameter. This will allow us to call the server with a simple function instead of making a fetch function on different instances.

4.- Store

Image for post
Image for post
source: https://vuejs.org/

4.1.- What do we need to have in mind when we do the Store?

  • Single Source of Truth
  • Data is Read-only
  • Divide the store per page

4.2.- Single source of truth

The application data (user is admin, user is logged, etc). Should be at one place only (the store). The pages should only read from here and they shouldn’t have their own copy to avoid problems along the app.

4.3.- Data is read only

Image for post
Image for post

The pages are not able to mutate the state directly. If you need to mutate it, it’s through an action.

4.4.- What goes in the store?

  • The data of the current view
  • The state of the current view
  • The “is” concept. (is loading?, is ready?, is current?, etc)
  • Shared data

5.- Styles for the App (components, and layouts)

5.1.- Styling “internal” components
By internal I mean, that are not open-source, you have them on your ‘components’ folder or are company internal.

In this case we can make our component with some base-style, but it should be able to accept styles from the outside.

5.2.- Styling components that will be open-source.
This components should have the minimum style possible and everything should be stylable from the outside

5.3.- Global styles
We should have a global css file. I call this theme, here’s where we are gonna define the fonts, font-size, etc. But also some components styles.
For example, if we have a component with the same style all along our app, those styles should be in the theme, with this we avoid the css over-write.
The base css must be here, and the styles that are going to be across the app.

Thanks to the pre-processors we can have several files and import them in the theme so this file can be readable.

I’ll love to hear from you, and what you think about this, my twitter is @edernegrete_. ❤️

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store