# Routing, layouts, and views
# Overview
This project uses Vue Router, which we initialize in src/router/index.ts
, with routes defined in src/router/routes.ts
. Inside the src/router
folder, there are also two sub-folders, both containing route-specific components: layouts
and views
.
Views, layouts and sub-components can be optionally located inside folders by using index.vue
file name. Both ./components/my-menu.vue
and ./components/my-menu/index.vue
are valid paths for import MyMenu from './components/my-menu'
. Since a view could contain non-shared components, queries, etc. in the future, it is recommended placing it in folders from the start.
# Layouts
Every view component must use a layout component as its base and register it as Layout
, as this convention helps us mock out layout components when testing views. Layouts usually aren't very complex, often containing only shared HTML like headers, footers, and navigation to surround the main content in the view.
# Views
Each view component will be used by at least one route in src/router/routes.ts
, to provide a template for the page. They can technically include some additional properties from Vue Router to control navigation, for example to fetch data before creating the component, but I recommend adding these guards to src/router/routes.ts
instead, as that behavior typically has much more to do with the route (and will sometimes be shared between routes) than it does the view component.
Each view component is located in its own folder which, at the same time, can contain a components
folder for components that are exclusively used in this view. For example, a view can have a menu and that menu might have menu-items. These would be located in views/my-view/components/
.
Note that views title and descriptions are automatically picked from the corresponding i18n translation file that matches its name. This is implemented at the end of src/router/routes.ts
file.