VueJs Skeleton with container for multiple dashboards

I want to share with you the way I use to start a dashboard with vuejs, keeping the code as clean as possible and separating our content and the main structure of the project.

First I want to show the structure of a VueJs project along with the new folders that we will add, I know that for many it is common but for other people who are just starting with VueJS it will be of great help.

VueJS Project Structure

```
src
+-- assets/
+-- components/
+-- containers/
    +-- dashboard/
        +-- layout/
            +-- Sidebar.vue
            +-- Header.vue
        +-- Dashboard.vue
+-- router/
+-- views/
+-- App.vue
+-- main.js
```

We could think of separating our dashboard/ directory into a separate repository of our project

Now let’s structure what our router would look like

In our router file we must understand that the first object in the routes array will be in charge of maintaining the group of authenticated routes of our app. I will omit here the guard and the necessary configuration to have an authenticated route.

The other object that I put in the example I will use to refer to our login page, at the end you can see that our dashboard will not render there

We use our app file to put the <router-view/> that is necessary to render the content according to the given path

Now let’s see the important part, the Dashboard.vue file that we will use to re-render the content from there

This is the file that we use as a bridge where we use <router-view /> again and render our content, so if we want to have multiple dashboards, we must make sure we have it in each one of them and also have the group of routes available. For the example code I am calling two components: sidebar and header, but to not extend the post I do not publish them.

The complete example can be found on Github, in the master branch it is using javascript and I have a branch called typescript-way where I currently have problems doing push on the routes. Feel free to propose changes.

Thanks for reading and sorry for my mistakes. I am not a native English speaker.