In my Vuejs project, I have some mon js functions which would be used through multiple ponents:

My code structure is as below, which was introduced in .html:

├── index.html
├── main.js
├── ponents
│   ├── App.vue
│   └── ...
└── vuex
    ├── store.js     # exports the store (with initial state and mutations)
    └── actions.js   # exports all actions

some_ponent.vue

<template>
// The page content
</template>

<script>
export default {
    attached: function() {
        if(!isLoggedIn) {
            $this.router.go('/signin');
        }
    }
}
</script>

In this case, I want to make a function loginRequired which would be called in several ponents.

So how should I organize the code？

In my Vuejs project, I have some mon js functions which would be used through multiple ponents:

My code structure is as below, which was introduced in http://vuejs.github.io/vuex/en/structure.html:

├── index.html
├── main.js
├── ponents
│   ├── App.vue
│   └── ...
└── vuex
    ├── store.js     # exports the store (with initial state and mutations)
    └── actions.js   # exports all actions

some_ponent.vue

<template>
// The page content
</template>

<script>
export default {
    attached: function() {
        if(!isLoggedIn) {
            $this.router.go('/signin');
        }
    }
}
</script>

In this case, I want to make a function loginRequired which would be called in several ponents.

So how should I organize the code？

• javascript
• ecmascript-6
• single-page-application
• vue.js
• vue-router

1 Answer 1

Here is my choice

├── index.html
└── src
    ├── main.js
    ├── config.js        # Here I define global constants like a base url for vue-resource
    ├── api              # here is all the http calls using Vue.resource
    │   ├── index.js
    │   └── resource.js  # here I define interceptors, for errors log, auth, etc
    ├── ponents
    │   ├── utils        # Here I define mon functions for ponents
    │   ├── App.vue
    │   └── ...
    └── vuex
        ├── store.js     # exports the store (with initial state and mutations)
        └── actions.js   # exports all actions

So what you want, according to my file structure, should be in the src/ponents/utils folder, at least that it uses some http calls, in that case, it would be part of the src/api api folder. In this case, the routes are in the main.js file, some people prefer to have a dedicated file routes.js in the src folder, it's up to you