Getting Started

app/app.vue: Root Component

The root component is the entry point of the Nuxt application. It wraps all pages with the layout system.

    
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
    

app/layouts/default.vue: Default Layout Template

The default layout wraps all pages and provides the main application structure with header, sidebar, and content areas. It uses Vue's composition API for dynamic layout behavior.

    
<template>
  <div class="main-wrapper" :class="posWrapperClass">
    <template v-if="shouldShowHeaderAndSidebar">
      <CommonLayoutsHeader />
      <CommonLayoutsSidebar />
    </template>

    <template v-if="shouldShowPosHeader">
      <CommonPosHeader />
    </template>

    <slot />
  </div>
</template>

<script>
export default {
  name: "DefaultLayout",

  computed: {
    // Hide header and sidebar on login/register pages
    shouldShowHeaderAndSidebar() {
      const path = this.$route.path
      return !(
        path === "/" ||
        path.includes("/login") ||
        path.includes("/register") ||
        path.includes("/coming-soon") 
      )
    },

    shouldShowPosHeader() {
      return this.$route.path.includes("/pos/")
    },

    posWrapperClass() {
      const path = this.$route.path
      if (path === "/pos/pos-1") {
        return "pos-five"
      } else if (path === "/pos/pos-5") {
        return "pos-three pos-four"
      }
      return ""
    },
  },
}
</script>
    

app/pages/index.vue: Home Page

Pages in NuxtJS use file-based routing. Each Vue file in the pages directory becomes a route. This page uses a component for its content.

    
<template>
    <ModulesAuthenticationLogin />
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount } from "vue";

export default defineComponent({
  name: "LoginPage",
  setup() {
    onMounted(() => {
      document.body.classList.add("account-page");
    });

    onBeforeUnmount(() => {
      document.body.classList.remove("account-page");
    });
  },
});
</script>
    

app/pages/dashboard/admin-dashboard.vue: Dashboard Page

Pages can use components directly. Nuxt automatically imports components from the components directory, making them available globally.

    
<template>
    <DashboardAdminDashboard />
</template>

<script>
export default {
    data(){
        return{
            
        }
    }
}
</script>
    

app/components/: Components Directory

Nuxt automatically imports all components from the app/components/ directory. Components are organized into subdirectories based on their functionality:

• common/ - Common layout components (header, sidebar, etc.)
• Dashboard/ - Dashboard-related components
• Application/ - Application features (Chat, Email, Calendar, etc.)
• Inventory/ - Inventory management components
• Sales/ - Sales-related components
• Settings/ - Settings components
• And many more organized by feature...

app/components/common/layouts-header.vue: Header Component

Components can be used directly in layouts and pages. Here's an example of a header component:

    
<template>
    <!-- Header -->
    <div class="header">
        <div class="main-header">
            <!-- Logo -->
            <div class="header-left active">
                <NuxtLink to="/dashboard/admin-dashboard" class="logo logo-normal">
                    <img src="@/assets/img/logo.svg" alt="">
                </NuxtLink>
            </div>
            <!-- /Logo -->

            <a id="mobile_btn" class="mobile_btn" href="#" @click="toggleMobileBtn">
                <span class="bar-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </a>

            <!-- Header Menu -->
            <ul class="nav user-menu">
                <!-- Navigation items -->
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        toggleMobileBtn() {
            // Mobile menu toggle logic
        }
    }
}
</script>
    

app/components/Dashboard/AdminDashboard.vue: Dashboard Component

Components can contain complex logic and be reused across multiple pages. Components are automatically available by their directory structure:

    
<template>
  <div class="page-wrapper">
    <div class="content">
      <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-2">
        <div class="mb-3">
          <h1 class="mb-1">Welcome, Admin</h1>
          <p class="fw-medium">
            You have <span class="text-primary fw-bold">200+</span> Orders, Today
          </p>
        </div>
      </div>

      <div class="row">
        <!-- Dashboard widgets and charts -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "AdminDashboard",
    // Component logic here
}
</script>
    

Component Naming Convention:

• Components in components/common/layouts-header.vue are available as <CommonLayoutsHeader />
• Components in components/Dashboard/AdminDashboard.vue are available as <DashboardAdminDashboard />
• Nuxt automatically converts directory names and file names to PascalCase component names
• All components are auto-imported, no manual imports needed!