TIP - Import Vuejs Modules at once.
Tags: vue, laravel
Published: 2018-03-16 21:48:47

---
title: TIP - Import Vuejs Modules at once.
published: true
description: How can we add multiple Vuejs modules at once.
tags: #vuejs,#laravel
---

Hey in this Post We will see how can we add multiple [Vuejs](https://vuejs.org/ "Vuejs") modules at once.

We all needed to import modules each time we create one on our modules folder like this (is from a real world project).

<span style="text-decoration: underline;">_store/index.js_</span>
```javascript
    import Vue from "vue";
    import Vuex from "vuex";

    import auth from "./modules/auth";
    import rows from "./modules/rows";
    import rooms from "./modules/rooms";
    import students from "./modules/students";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules: {
        auth,
        rows,
        rooms,
        students
      }
    });
```
![Vuejs](https://image.ibb.co/bAWG4c/Screen_Shot_2018_03_16_at_8_54_22_PM.png "vuejs")

Like you see in the example above we have a 10 extra lines in our code. 5 lines to import the modules and 5 others to declare them on modules object.

Let's see now how can we reduce this 10 lines to 1 line So to do that we need to create an `index.js` file on modules folder that can listen to all the `.js` files inside modules folder and import them one by one.

<span style="text-decoration: underline;">_modules/index.js_</span>
```javascript
    import camelCase from "lodash/camelCase";
    const requireModule = require.context(".", false, /\.js$/); //extract js files inside modules folder
    const modules = {};

    requireModule.keys().forEach(fileName => {
      if (fileName === "./index.js") return; //reject the index.js file

      const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, "")); //

      modules[moduleName] = requireModule(fileName).default;
    });
    export default modules;
```
<span style="text-decoration: underline;">_modules/auth.js_</span>
```javascript
    import auth from "../api/auth";

    const state = {
      isLoggedIn: !!localStorage.getItem("token"),
    };

    const getters = {
      isLoggedIn: state => {
        return state.isLoggedIn;
      }
    };

    const actions = {
      async loginUser({ commit }, data) {
        return await auth.login(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
        });
      },
      async registerUser({ commit }, data) {
        await auth.register(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
          return data;
        });
      },
      async logoutUser({ commit }) {
        return await auth.logout(data => {
          localStorage.removeItem("token");
          commit("logoutUser");
        });
      }
    };

    const mutations = {
      loginUser: state => {
        state.isLoggedIn = true;
      },
      logoutUser: state => {
        state.isLoggedIn = false;
      }
    };
    export default {
      state,
      actions,
      mutations,
      getters
    };
```
Now we go back to our `store/index.js` and just import `"./modules"` equivalent to `"./modules/index.js"`

<span style="text-decoration: underline;">_store/index.js_</span>
```javascript
    import Vue from "vue";
    import Vuex from "vuex";

    import modules from "./modules";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules // Equivalent to => modules : modules(imported)
    });
```
You can see now how our store/index.js is clean.

For more informations check [chris vfritz repo](https://github.com/chrisvfritz/vue-enterprise-boilerplate/tree/master/src/state "chris vfritz repo").