Structure

1. Folder Structure Overview

The Taskify Nuxt Template is built with a modular structure, allowing you to easily manage and extend your project. Here's a brief overview of the key directories and files:

taskify-nuxt/
|   assets/css/           // Custom CSS Files
│   │   animations.css
│   │   main.css
│   │   style.css
└───components/           // Global Components
│   │   base/
│   │   cards/
│   │   section/
│   │   svg/
└───content/              // Content for the pages
│   │   index.md
│   │   about.md
│   │   ...
└───layouts/              // Layouts
│   │   auth.vue
│   │   default.vue
│   │   docs.vue
│   │   empty.vue
└───pages/                // Pages
│   │   index.vue
│   │   about.vue
│   │   ...
└───public/               // Public assets
│   │   img/              // Images used in the content
│   │   favicon.png
│   │   og-image.png
|   server/
|   error.vue             // Error Page
|   app.config.ts         // Application Configuration
|   nuxt.config.ts        // Nuxt Configuration
|   nuxt.schema.ts        // Nuxt Studio Schema
|   tsconfig.json         // TypeScript Configuration
|   tailwind.config.js    // Tailwind Configuration
|   package.json
|   README.md

2. Pages and Layouts

The pages directory contains the pages of your application. Each page has a corresponding content page in the content directory. If you want to only edit the content of a page, then you can edit the content page in the content directory.

The layouts directory contains the layouts of your application. You can use the default layouts or create your own layouts. Each page layout is defined in the pages directory. Example like the login.vue page is using the auth.vue layout.

// pages/login.vue
<script setup lang="ts">
definePageMeta({
  layout: "auth",
});
</script>

There are 4 default layouts: auth, default, docs, and empty.

• auth.vue is the layout for the authentication pages.
• default.vue is the layout for the default pages.
• docs.vue is the layout for the documentation pages.
• empty.vue is empty layout for custom pages.

  3. Components Directory

The components directory contains the global components of your application. Each file in this directory corresponds to a component in your application.

There are 4 default directories: base, cards, section, and svg.

• base contains the base components of your website.
• cards contains the card components of your website.
• section contains the section components of your website.
• svg contains the svg components of your website.

You can also create your own components in this directory.

4. Assets and Static Files

The assets directory contains the css assets of your website. There are only 3 css files in this directory: animations.css, main.css, and style.css.

• animations.css contains the css animations that were used in the website.
• main.css contains the importing of Tailwind CSS and the custom css files.
• style.css contains the Taskify style.

The public directory contains the static files of your website. There are 2 default image used for SEO purposes: favicon.png and og-image.png.

The public/img/ directory contains the images used in the content.