Directory Structure #

The directory structure of a Corrad application is as follows:

corrad-app
├── assets
│   ├── img
│   ├── js
│   ├── style
├── components
├── composables
├── layouts
├── middleware
├── navigation
├── pages
├── plugins
├── prisma
│   ├── schema.prisma
├── public
│   ├── favicon.ico
├── server
│   ├── api
│   ├── nitro.config.js
├── stores
├── .env
├── .gitignore
├── app.config.js
├── app.vue
├── ecosystem.config.js
├── formkit.config.js
├── nuxt.config.js
├── package.json
├── README.md
├── tailwind.config.js
├── tsconfig.json
├── yarn.lock

assets #

The assets directory contains your un-compiled assets such as images, JavaScript, and CSS.

components #

The components directory contains your Vue.js components. Components are reusable Vue.js instances with a name. The name of a component should always start with a capital letter.

composables #

The composables directory contains your composables that can be used across your application.

layouts #

The layouts directory contains your application layouts. Layouts are the Vue.js components that are used to change the layout of a page. For example, you can have a layout for your application's homepage and a different layout for your application's dashboard.

middleware #

The middleware directory contains your application middleware. Middleware lets you define custom functions that can be run before rendering a page or a group of pages.

navigation #

The navigation directory contains your application navigation. Navigation is used to define the navigation structure of your application.

pages #

The pages directory contains your application views and routes. The framework reads all the *.vue files inside this directory and creates the application router based on the Vue.js components.

plugins #

The plugins directory contains your JavaScript plugins that you want to run before instantiating the root Vue.js application.

prisma #

The prisma directory contains your Prisma schema and migrations. The framework uses Prisma to connect to your database.

public #

The public directory contains your static files. Each file inside this directory is mapped to the root of the application. For example, /public/robots.txt is mapped as /robots.txt.

server #

The server directory contains your server-side code. The framework uses Nitro to run your server-side code.

stores #

The stores directory contains your Vuex stores.

.env #

The .env file contains your environment variables. You can use environment variables to store sensitive data such as API keys and database passwords.

.gitignore #

The .gitignore file tells git which files it should not track / not maintain a version history for.

app.config.js #

The app.config.js file contains your application configuration. You can use this file to configure your application.

app.vue #

The app.vue file is the root Vue.js component of your application.

ecosystem.config.js #

The ecosystem.config.js file contains your application configuration for PM2.

formkit.config.js #

The formkit.config.js file contains your application configuration for FormKit.

nuxt.config.js #

The nuxt.config.js file contains your Nuxt.js configuration. You can use this file to configure Nuxt.js.

package.json #

The package.json file contains your application dependencies and scripts.

README.md #

The README.md file contains information about your application.

tailwind.config.js #

The tailwind.config.js file contains your TailwindCSS configuration. You can use this file to configure TailwindCSS.

tsconfig.json #

The tsconfig.json file contains your TypeScript configuration. You can use this file to configure TypeScript.

yarn.lock #

The yarn.lock file contains the exact versions of your application dependencies that were installed for your project.