Vue App structuring

Question

I am currently trying to build my first webapp using vue.js

Now 2 days of tutorials deep I am still not 100% sure how to structure a basic application. Using the vue-cli and webpack already makes a nice structure, including a /src Folder with components and a /router Folder for routing.

Now my plan is to create a ToDo App. I want to dynamically switch between [show todos] and [add todo], which is just a form with a submit button. I have already achieved it by using it without components and the cli.

My structure would be:

App.vue -> buttons with the two router-link to components/ShowTodos.vue & components/AddTodos.vue

components/ShowTodos.vue -> Table including the todo list

components/AddTodos.vue -> Form with submit button

Now the routing part works, I am able to switch between those two components.

Now 2 Questions:

How can I push the information from the form in the AddTodos component into an Array in the ShowTodos component in order to loop through there ?
Is this a proper way to structure an vue app, and if not how can I improve it ?

Thank you very much.

This is the first time for me using a component based JS Framework, so its pretty hard to follow along.

Husni Abdul Nazer · Accepted Answer · 2017-08-20 10:00:31Z

1

On structuring your vuejs application , this can be helpful

app/
   moduleA/
      components/
      index.js
      routes.js
   moduleB/
      components/
      index.js
      routes.js
   index.js
   routers.js
   main.vue
   router/
   components/ -> shared
   main.js

// app/routes.js
import { routes as moduleA } from './moduleA'
import { routes as moduleB } from './moduleB'
export default [ ...moduleA, ...moduleB ]

// app/moduleA/index.js
export { default as routes } from './routes'

// app/moduleB/index.js
export { default as routes } from './routes'

// app/index.js
export { default as routes } from './routes

'

answered Aug 20, 2017 at 10:00

Husni Abdul Nazer

1011 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sandoche · Accepted Answer · 2018-06-12 07:50:11Z

1

About the second question, I did some researches, and that's what I recommend:

.
├── app.css
├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── main.js
├── mixins
│   └── ...
├── router
│   └── index.js
├── store
│   ├── index.js
│   ├── modules
│   │   └── ...
│   └── mutation-types.js
├── translations
│   └── index.js
├── utils
│   └── ...
└── views
    └── ...

Read more here: https://medium.com/@sandoche/how-to-structure-a-vue-js-project-eabe75161882

answered Jun 12, 2018 at 7:50

Sandoche

5719 silver badges19 bronze badges

Comments

Berni · Accepted Answer · 2017-08-21 09:42:22Z

0

I can recommend this boilerplate. It has a very good structure and I am now using it in every project.

/components
/layouts
/mixins
/pages
/routes
/services
/store
/transformers

He also explains the structure very well. https://github.com/petervmeijgaard/vue-2.0-boilerplate#structure

answered Aug 21, 2017 at 9:42

Berni

2584 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vue App structuring

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related