Laravel 10 and Laravel 11 feature distinct directory structures, with several core files either removed or updated. Thus, we advise migrating your existing project to the latest version of Vuexy Laravel 11 as a new project once we release the template with Laravel 11.

You can refer to the Upgrading to Laravel 11 from Laravel 10 guide for assistance: Link

To familiarize yourself with the updated Laravel 11 Directory Structure, please visit: Link

We strongly recommend you to either start your project with Vuexy , or move your project on top of it to have the best experience.

Updating the Brand Name

To update or replace the brand name in your application, modify the config/variables.php file:

'templateName' => 'Your_Brand_Name',

Updating the Brand Logo

To change the logo, update the resources/views/_partials/macros.blade.php file. Depending on the format of your logo, you can use either an <img> tag or an <svg> tag.

Using an Image Logo (PNG, JPG)

<img src="IMAGE_PATH/IMAGE.PNG" alt="logo">

Using an SVG Logo

<svg>
  <!-- Your SVG content here -->
</svg>

Customizing Logo and Branding

You can also add or remove utility classes for logo/branding based on your requirements, such as changing text color, font size, margin, padding, etc.

Example for Vertical Layout

To update the branding for the vertical layout, modify the resources/views/layouts/verticalMenu.blade.php file:

<a href="{{ url('/') }}" class="app-brand-link">
  <span class="app-brand-logo demo">
    @include('_partials.macros', ["height" => 20])
  </span>
  <span class="app-brand-text demo menu-text fw-bold">{{ config('variables.templateName') }}</span>
</a>

Example for Horizontal Layout

To update the branding for the horizontal layout, modify the resources/views/layouts/navbar.blade.php file:

@if (isset($navbarFull))
<div class="navbar-brand app-brand demo d-none d-xl-flex py-0 me-4">
  <a href="{{ url('/') }}" class="app-brand-link gap-2">
    <span class="app-brand-logo demo">
      @include('_partials.macros', ["height" => 20])
    </span>
    <span class="app-brand-text demo menu-text fw-bold">{{ config('variables.templateName') }}</span>
  </a>
  <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-xl-none">
    <i class="ti ti-x ti-sm align-middle"></i>
  </a>
</div>
@endif

We've changed the HTML + Laravel template in the new update

It's a total re-write, restructured, updated UI, updated libraries and there is no way you can upgrade from last version, You will have to move your files to the newer version if you would like.

The easiest way to update would be to move files from your existing app/project to the updated version's starter-kit.

When working with Laravel and utilizing the Yarn package manager for your project's frontend dependencies, you may encounter certain warnings during the installation process. These warnings are typically associated with third-party packages and are generally safe to ignore. However, it's essential to be aware of these warnings and understand their relevance to your project. This documentation will guide you through the common Yarn warnings you might encounter and help you decide whether to keep or remove specific packages based on your project's requirements.

Understanding Yarn Warnings

Yarn warnings can arise during the installation of packages for various reasons, such as deprecated packages, unused dependencies, or potential conflicts. These warnings often serve as notifications rather than errors and can be safely disregarded in most cases.

Investigating Yarn Warnings

If you encounter Yarn warnings during the installation process, it's a good practice to investigate their origins and relevance to your project.

Take note of the specific warning messages that Yarn provides during the installation. Understanding the warning message is the first step in determining its significance.

• Vite
• Mix

Review Package Information

Consult the information below to understand the purpose of the packages associated with the warnings:

• bloodhound-js: This package is utilized for implementing search functionality of the template. You should retain it if your project requires search features.
• pdfmake: Used for PDF export functionality within datatables. Consider removing it if your project does not utilize datatables' PDF export feature.
• babel (mix only): Required when using Laravel Mix for asset compilation. This package will be deprecated once we migrate to Vite. (Required)
• laravel-mix (mix only): Necessary for Laravel Mix integration in your project. It will no longer be needed when you migrate to Vite. (Required)
• chart.js: A library for creating charts and graphs. Remove it if your project does not use the Chart.js package for charting purposes.
• bootstrap-maxlength: This library enforces character limits with counter in input fields. Remove it if your project does not rely on this feature.

Deciding Whether to Keep or Remove Packages

After reviewing the warnings and understanding the purpose of the associated packages, make a decision based on your project's requirements:

• Keep Packages: If a package is essential for your project's functionality, such as search, PDF export, or charting, you should retain it. Ensure that the warnings associated with these packages do not impede your project's performance.
• Remove Packages: If you determine that certain packages are unnecessary for your project and their warnings are merely noise, you can safely remove them. This can help reduce the complexity of your project and potentially improve performance.

Yarn warnings are a common occurrence during package installation in Laravel projects. By following this documentation, you can better understand the warnings, evaluate the relevance of associated packages, and make informed decisions about whether to keep or remove them. This approach will help you streamline your project's frontend dependencies and maintain a more efficient and manageable codebase.

If you want to use default pagination with bootstrap tables in place of using datatables, By default laravel use tailwind views for pagination but As our template is Bootstrap admin template, we need to call the paginator's useBootstrap method within our AppServiceProvider:

<?php
namespace  App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class  AppServiceProvider  extends  ServiceProvider{

  /**
  * Register any application services.
  * @return  void
  */

  public  function  register(){
    //
  }

  /**
  * Bootstrap any application services.
  * @return  void
  */

  public  function  boot(){
    Paginator::useBootstrap();
  }
}

Vuexy admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.

To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.

Let's say, if you want to create your own custom theme named as raspberry, follow steps below.

1. First of all, create custom theme scss files, like theme-raspberry.scss and theme-raspberry-dark.scss inside assets/vendor/scss/ folder.
2. Now, add your newly created theme name in the Helpers.php file. You can find it here: app -> Helpers -> Helpers.php
Copy

// All options available in the template
$allOptions = [
  ...
  'myTheme' => ['theme-default', 'theme-bordered', 'theme-semi-dark', 'theme-raspberry'],
 ...
];

3. Also, you have to add your new theme name in scriptsIncludes.blade.php and template-customizer.js to add theme option in Template Customizer.

You can find scriptsIncludes.blade.php file in resources/views/layouts/sections folder.

• Vite
• Mix

Copy

<script>
  window.templateCustomizer = new TemplateCustomizer({
  ...
    // Themes
    @foreach (['default', 'bordered', 'semi-dark','raspberry'] as $name)
      'theme-❴❴ $name ❵❵.css': '❴❴ Vite::asset("resources/assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.scss") ❵❵',
      'theme-❴❴ $name ❵❵-dark.scss':
      '❴❴Vite::asset("resources/assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css") ❵❵',
    @endforeach
  ...
  });
</script>

Copy

<script>
  window.templateCustomizer = new TemplateCustomizer({
  ...
    // Themes
    @foreach (['default', 'bordered', 'semi-dark','raspberry'] as $name)
      'theme-❴❴ $name ❵❵.css': '❴❴ mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css") ❵❵',
      'theme-❴❴ $name ❵❵-dark.css':
      '❴❴ mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css") ❵❵',
    @endforeach
  ...
  });
</script>

You can find template-customizer.js file in resources/assets/vendor/js folder.

Copy

// Themes
TemplateCustomizer.THEMES = [
  {
    name: 'theme-default',
    title: 'Default'
  },
  {
    name: 'theme-semi-dark',
    title: 'Semi Dark'
  },
  {
    name: 'theme-bordered',
    title: 'Bordered'
  },
  {
    name: 'theme-raspberry',
    title: 'Raspberry'
  }
];

4. Now, you can set your newly created theme from both custom.php and Template Customizer.
Copy

'myTheme' => 'theme-raspberry',

Now, How to add variables, styles & mixins to theme scss file.

• To use declared variables & mixins, Theme requires to include library, pages, variable files.
• Theme requires primary color variable to update color as require. So need to add $primary-color variable with basic includes like below
Copy

// Component variables include
@import './_components/include';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';

$primary-color: #e30b5c;

// To update color to custom theme's primary color
@include template-common-theme($primary-color);
@include template-libs-theme($primary-color);
@include template-pages-theme($primary-color);

• After applying primary color for each library, components & pages, To update navbar, You can add custom style after including mixin as below :
Copy

@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• To update menu, You can add custom style after including mixin as below :
Copy

@include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);

• To update footer, You can add custom style after including mixin as below :
Copy

@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• You can also add style that should work for custom theme only.
• That's All!!

It's only recommended to use template without customizer, if you wish to configure themes, layouts and other customizations by changing custom options from custom.php file.

We have provided template with customizer, So user can check all the layout options and it's classes and can get idea about all the possibilities.

But before deployment, you might not required this customizer. Then you can check below options :

Option 1: If you want to remove customizer and also not required LocalStorage, then you can use hasCustomizer option in custom.php file

If you set this option to false, it will remove customizer, template customizer js and initialization script as well.

return [
  'custom' => [
    ...
    'hasCustomizer' => false,
    ...
  ],
];

Option 2: If you want to hide customizer and you need LocalStorage to store data like menuCollapse, light/dark layout, etc.., then you can use displayCustomizer option from custom.php file

If you set this option to false, it will hide customizer and won't remove/hide template customizer js.

return [
  'custom' => [
    ...
    'displayCustomizer' => false,
    ...
  ],
];

We've provided the template with LTR (English) and RTL (Arabic) language support. However, users may want to update or remove this feature.

However, before deploying, you might not need this language support for LTR and RTL. In that case, you can refer to the steps below to remove these integrations :

1. Remove language dropdown, remove languageDropdown code from main.js
Copy

let languageDropdown = document.getElementsByClassName('dropdown-language');

if (languageDropdown.length) {
  let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
  const dropdownActiveItem = languageDropdown[0].querySelector('.dropdown-item.active');

  directionChange(dropdownActiveItem.dataset.textDirection);

  for (let i = 0; i < dropdownItems.length; i++) {
    dropdownItems[i].addEventListener('click', function () {
      let textDirection = this.getAttribute('data-text-direction');
      window.templateCustomizer.setLang(this.getAttribute('data-language'));
      directionChange(textDirection);
    });
  }
  function directionChange(textDirection) {
    if (textDirection === 'rtl') {
      if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') !== 'true')
        window.templateCustomizer.setRtl(true);
    } else {
      if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') === 'true')
        window.templateCustomizer.setRtl(false);
    }
  }
}

2. Remove customizer reset language to English functionality, Remove below code from main.js
Copy

setTimeout(function () {
  let templateCustomizerResetBtn = document.querySelector('.template-customizer-reset-btn');
  if (templateCustomizerResetBtn) {
    templateCustomizerResetBtn.onclick = function () {
      window.location.href = baseUrl + 'lang/en';
    };
  }
}, 1500);

3. Remove customizer reset language on LTR & RTL change, Remove below code from template-customizer.js
Copy

// For demo purpose, we will use EN as LTR and AR as RTL Language
this._getSetting('Lang') === 'ar' ? this._setSetting('Lang', 'en') : this._setSetting('Lang', 'ar');

And

Copy

if (e.target.value === 'rtl') {
  window.location.href = baseUrl + 'lang/ar';
} else {
  window.location.href = baseUrl + 'lang/en';
}

4. Remove language routing (Only, if not using Localization) from web.php
Copy

use App/Http/Controllers/language/LanguageController;
...
...

// locale
Route::get('lang/{locale}', [LanguageController::class, 'swap']);

5. Remove controller file(Only, if not using Localization & Routing) from app/Http/Controllers/language. You can remove whole folder if not using it.
6. Remove middleware app/Http/Middleware/LocaleMiddleWare.php file.
7. Remove included middleware from Kernel.php file.
8. Remove language json files that are not useful from lang\ folder.
9. And, Everything is in place for the removal of the LTR(English) & RTL(Arabic) feature.