image

Installation process

The following process will be used to install admin dashboard using package manager.

  • Server Requirements: https://laravel.com/docs/10.x/deployment#server-requirements
  • Install php package manager Composer : Please install latest version of composer from https://getcomposer.org
  • This project is using Laravel version 10.x. https://laravel.com/docs/10.x
  • Install Node.js : Please install latest version of Node.js from: https://nodejs.org
  • Copy laravel folder from themeforest bundle and extract to your suitable directory or folder..
  • Open terminal or command prompt with installation directory/folder.
  • Install PHP dependencies: composer install
  • Create new .env file from copying .env.example
  • Generate laravel app key php artisan key:generate
  • Install node dependencies: npm install
  • Run command npm run dev to start vite development.
  • Run command npm run build to build for production.
  • Run command php artisan serve to start php server which will run laravel or if you are using other server apps like WAMP, XAMPP or MAMP, you can follow that guide.

In case if you have any problems or query then please contact us

File Sturcture

The arrangement below describes our file structure.

  • Vristo
    • routes
    • public
    • resources
      • views
      • js
        • src
          • assets
          • components
          • composables
          • layouts
          • locales
          • router
          • store
          • views
          • app-setting.ts - custom app setting configuration file
          • App.vue - vuejs project startup file
          • main.ts - vuejs entry point file
      • theme.config.ts
    • package.json
    • postcss.config.cjs
    • tailwind.config.cjs
    • tsconfig.json
    • tsconfig.node.json
    • vite.config.ts
    • .editorconfig
    • .gitignore
    • .prettierrc

Code Structure

This section will give you a brief description of our code.

1. Header Section : This is the default navbar section. It contains :

  • Sidebar Toggle button.
  • Quick access button for calendar.
  • Quick access button for todolist.
  • Quick access button for chat.
  • Search Bar
  • Theme toggle button.
  • Language Dropdown
  • Message Dropdown
  • Notification Dropdown
  • User Profile with Dropdown
  • Horizontal Menu

Note:- These categories are defined by us and you can modify as per your needs :)

  <!--  Navbar Component  -->
  <Header></Header>
  ==========================================================

  <!--  BEGIN NAVBAR  -->
  <header :class="{ dark: store.semidark && store.menu === 'horizontal' }">
      <div class="shadow-sm">
          <div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">
              ..............................
          </div>

          <!-- horizontal menu -->
          <ul
              class="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
          >
              ..............................
          </ul>
      </div>
  </header>
  <!--  END NAVBAR  -->

2. Main Container Section : The main container section includes header, footer and main content section.

  • Sidebar Section
  • Header Section
  • Main Content Section
  • Footer Section
  <!--  BEGIN MAIN CONTAINER  -->
  <div
      class="main-section antialiased relative font-nunito text-sm font-normal"
      :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]"
  >
      ..............................
  </div>
  <!-- END MAIN CONTAINER -->

3. Sidebar : This is the sidebar code.

  <!--  Sidebar Component  -->
  <Sidebar></Sidebar>
  ==========================================================

  <!--  BEGIN SIDEBAR  -->
  <div :class="{ 'dark text-white-dark': store.semidark }">
      <nav class="sidebar fixed top-0 bottom-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
          ..............................
      </nav>
  </div>
  <!--  END SIDEBAR  -->

4. Main Content : This is the Main Content code section.

This is the root structure where you can create widgets, charts, tables etc.

  <!--  BEGIN CONTENT PART  -->
  <div class="main-content">
      ..............................
  </div>

  <!--  END CONTENT PART  -->

5. Footer : This is the Footer code.

  <!--  Footer Component  -->
  <Footer></Footer>
  ==========================================================

  <!--  BEGIN FOOTER  -->
  <p class="pt-6 text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">
      ..............................
  </p>
  <!--  END FOOTER  -->

The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.

  <!--  BEGIN MAIN CONTAINER  -->
  <div class="main-section antialiased relative font-nunito text-sm font-normal" :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]">
      <!-- BEGIN SIDEBAR MENU OVERLAY -->
      <div class="fixed inset-0 bg-[black]/60 z-50 lg:hidden" :class="{ hidden: !store.sidebar }" @click="store.toggleSidebar()"></div>
      <!-- END SIDEBAR MENU OVERLAY -->

      <!-- BEGIN SCREEN LOADER -->
      <div v-show="store.isShowMainLoader" class="screen_loader fixed inset-0 bg-[#fafafa] dark:bg-[#060818] z-[60] grid place-content-center animate__animated">
          <svg>...</svg>
      </div>
      <!-- END SCREEN LOADER -->

      <!-- BEGIN SCROLL TO TOP BUTTON -->
      <div class="fixed bottom-6 ltr:right-6 rtl:left-6 z-50">
          <template v-if="showTopButton">
              <button type="button" class="btn btn-outline-primary animate-pulse rounded-full bg-[#fafafa] p-2 dark:bg-[#060818] dark:hover:bg-primary" @click="goToTop">
                  <svg>...</svg>
              </button>
          </template>
      </div>
      <!-- END SCROLL TO TOP BUTTON -->

      <!-- BEGIN APP SETTING LAUNCHER -->
      <Setting />
      <!-- END APP SETTING LAUNCHER -->

      <div class="main-container text-black dark:text-white-dark min-h-screen" :class="[store.navbar]">
          <!--  BEGIN SIDEBAR  -->
          <Sidebar />
          <!--  END SIDEBAR  -->

          <!--  BEGIN CONTENT AREA  -->
          <div class="main-content">
              <!--  BEGIN NAVBAR  -->
              <Header></Header>
              <!--  END NAVBAR  -->

              <div class="p-6 animation">
                  <!--  BEGIN PAGE CONTENT  -->
                  <router-view></router-view>
                  <!--  END PAGE CONTENT  -->

                  <!-- BEGIN FOOTER -->
                  <Footer></Footer>
                  <!-- END FOOTER -->
              </div>
          </div>
          <!--  END CONTENT AREA  -->
      </div>
  </div>
  <!--  END MAIN CONTAINER  -->

Admin JS Code Structure

This section will give you a brief description of our admin template JS code.

1. app-setting.js : This is primary js file. It is necessary for the layout to work. It contains the code as follows :-

  • Set default layout
  • Set Navigation Position
  • Set Navbar Type
  • Set Router Animation
  • Theme change funtionality
  • Direction change funtionality
  import { $themeConfig } from '../theme.config';
  import { useAppStore } from '@/stores/index';

  export default {
      init() {
          const store = useAppStore();

          // set default styles
          let val: any = localStorage.getItem('theme'); // light, dark, system
          val = val || $themeConfig.theme;
          store.toggleTheme(val);

          val = localStorage.getItem('menu'); // vertical, collapsible-vertical, horizontal
          val = val || $themeConfig.menu;
          store.toggleMenu(val);

          val = localStorage.getItem('layout'); // full, boxed-layout
          val = val || $themeConfig.layout;
          store.toggleLayout(val);

          val = localStorage.getItem('i18n_locale'); // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh

          val = val || $themeConfig.locale;

          const list = store.languageList;
          const item = list.find((item: any) => item.code === val);
          if (item) {
              this.toggleLanguage(item);
          }

          val = localStorage.getItem('rtlClass'); // rtl, ltr
          val = val || $themeConfig.rtlClass;
          store.toggleRTL(val);

          val = localStorage.getItem('animation'); // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
          val = val || $themeConfig.animation;
          store.toggleAnimation(val);

          val = localStorage.getItem('navbar'); // navbar-sticky, navbar-floating, navbar-static
          val = val || $themeConfig.navbar;
          store.toggleNavbar(val);

          val = localStorage.getItem('semidark');
          val = val === 'true' ? true : $themeConfig.semidark;
          store.toggleSemidark(val);
      },

      toggleLanguage(item: any) {
          const store = useAppStore();

          let lang: any = null;
          if (item) {
              lang = item;
          } else {
              let code = store.locale || null;
              if (!code) {
                  code = localStorage.getItem('i18n_locale');
              }

              item = store.languageList.find((d: any) => d.code === code);
              if (item) {
                  lang = item;
              }
          }

          if (!lang) {
              lang = store.languageList.find((d: any) => d.code === 'en');
          }

          store.toggleLocale(lang.code);
          return lang;
      },

      changeAnimation(type = 'add') {
          const store = useAppStore();
          if (store.animation) {
              const eleanimation: any = document.querySelector('.animation');
              if (type === 'add') {
                  eleanimation?.classList.add('animate__animated');
                  eleanimation?.classList.add(store.animation);
              } else {
                  eleanimation.classList.remove('animate__animated');
                  eleanimation.classList.remove(store.animation);
              }
          }
      },
  };

2. theme.config.js : This is theme configuration js file. This file contains optional setting for set defaut layout, theme and language functionality. It contains the code as follows :-

  • Language
  • Theme
  • Navigation
  • Layout
  • Direction
  • Animation
  • Navbar
  • Semidark
  // APP CONFIG
  export const $themeConfig = {
      locale: 'en', // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
      theme: 'light', // light, dark, system
      menu: 'vertical', // vertical, collapsible-vertical, horizontal
      layout: 'full', // full, boxed-layout
      rtlClass: 'ltr', // rtl, ltr
      animation: '', // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
      navbar: 'navbar-sticky', // navbar-sticky, navbar-floating, navbar-static
      semidark: false,
  };