Folder Structure & Layout

Folder Structure

public/

This folder contains public assets like favicon and index.html file

src/

This folder contains all the pages, components, styles. This is the folder you can develop your project.

@assets/

This folder keeps images, fonts, icons, and scss files.

@store/

This folder contains config file for your app.

@layout/

This folder contains layout files with its components.

@navigation/

This folder contains sidebar menu items.

@router/

Router folder contains page routes and the main router

@view/

View folder contains all Yoda pages like component pages. You can write your all pages here.

Layout

Yoda has three layout types;

Vertical Layout

Vertical layout is the main layout of Yoda. Yoda Main pages use this layout.

Horizontal Layout

Horizontal layout is 2. alternative layout, you can change it using customizer.

Full Layout

Full layout is using for Login screens, Lock pages, and error pages.

How to apply layout?

You can apply from router. When you create new page on src/router. Vertical layout is default layout.

{
     path: "/pages/authentication/login",
     name: "login",
     component: () => import("@/view/pages/authentication/login"),
     meta: {
        layout: "full",
     },
 },