The best structure for building a new project with Vuejs

What we will do when we start a new project with Vuejs? And what we need to prepare before starting it?
First, we need to create the best structure and apply it from the beginning. If we start from scratch, we will spend a lot of time to prepare and create the best structure.

But what's the best structure? Don't worry, I created a Vuejs source basic example already, it may help you start a new project with Vuejs faster, better structure and it's a good approach for Vuejs newbie. View the resource here

So, what we have in the Basic Vuejs source code template?

Structure:

-src
--assets
----images
----icons
----...
--components
----#Common components (Loading, Buttons, H1, H2...)
--configs
----#Common configs
--containers
----#Main Screens/ Main Views (App, Home, Login, Signup, Production...)
--layouts
----#The wrapped components (Sidebar, Header, Footer...)
--mixins
----#Contain all your mixins
--plugins
----#Plugin's and external library's configs
--utils
----Contain all of the util files
--...


Structure for a component container:

-app/containers/YourComponentContainer
---YourComponentContainer
---services
-----#index.js
-----#api.js
-----#constants.js
-----#getters.js
-----#mutations.js
-----#storeModule.js
-----#...
---styles
-----#index.css
-----#SubComponent.css
-----#...
---index.vue
---SubComponent.vue
---...


In this structure, we separated all of the logics (services folder) and style files (styles folder) and put inside their folder. The Vue just contains what they need for rendering.

Why we do that? You can see that the structure is very clear and so easy for management and maintenance. Each file or folder has been created with their purpose, this makes code structure less complex.

Performance: Usually, we implement all store modules into the main store file in the root app and load all of them for the first time loading page, the performance may affect this.
So in this Basic Vuejs template, the logic code will be injected when the component created and remove if it's unnecessary to run on the background when the component destroyed.

created Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.
destroyed Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed.
View more Vuejs Lifecycle-Hooks: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks


Please check the /src/containers/TodoList/index.vue file to see how we do that

import { registerStoreModule, unregisterStoreModule } from '../../mixins';

...

export default {
  mixins: [registerStoreModule, unregisterStoreModule],
  created() {
    this.registerStoreModule('todoList', storeModule);
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  },
  destroyed() {
    this.unregisterStoreModule('todoList');
  }
};


What we implemented already:

- Template with Vuetify.
- Handle routes with vue-router.
- API async with vuex
- SASS and CSS supported.
- Eslint supported

Let us start now:

- Clone the Basic Vuejs template I have created:
git clone https://github.com/hieuht2048/vuejs-basic-source-code-template YOUR_PROJECT_NAME


- Move to the appropriate directory:

cd YOUR_PROJECT_NAME


- Install all Node packages:

yarn install


- Compiles and hot-reloads for development:

yarn serve


- Compiles and minifies for production:

yarn build


- Lints and fixes files:

yarn lint


To start this project with your purpose, please run and view the example components and code structures first, then make your component follow by what we have done.

© 2019 4codev

Created with love by Sil.