Vuexy Admin provides separate core theme assets and folder app-assets/ and user assets folder assets/. So you can easily update the theme.

Like all HTML templates, you will need to manually handle all updates that we provide after purchase for free.

Follow the below steps to update Vuexy:

  1. Backup all your files (Project/Template).
  2. Review Vuexy's changelog to understand the changes before updating.
  3. Unzip the latest version of Vuexy and open vuexy-html-bootstrap-admin-template/.
  4. Copy with replacing changed core folder & files:
    • app-assets/
    • src/
    • .csscomb.json
    • config.json
    • gulpfile.js
    • package.json
  5. Now you have all the core assets of the template. Use/Merge the latest HTML code of the element/component manually. You can also replace html/ folder if you have not made any changes.
  6. Execute gulp dist command to generate css and js files in app-assets/ folder.

Bingo! You are done.

If something goes wrong, you can revert your updates by reusing your backup files.

In Vuexy HTML Admin Template, You can use feather SVG icons using HTML or JS. Also check feather SVG Icon documentation here.

To add SVG icon in your HTML

To add feather SVG icon in HTML, you can use below structure:

        <i data-feather="heart"></i>
To add SVG icon in JS files

To add feather SVG icon in JS, you can use below structure:

        feather.icons['heart'].toSvg()

Check more information about feather SVG icons structure here.

To remove feather SVG icon

Vuexy Admin provides app-assets/vendor/ folder that contains js/vendors.min.js and css/vendors.min.css files for vendors js and css.

Find config.json file in root folder and follow below steps to remove feather SVG icons:

  1. Remove included feather-icons/feather-icons.min.js from vendors > js array
  2. Remove included feather-icons/feather-icons.min.css from vendors > css array
  3. Execute gulp dist-vendor-js command to generate vendors.min.js file in app-assets/vendors/js folder
  4. Execute gulp dist-vendor-css command to generate vendors.min.css file in app-assets/vendors/css folder.

This will remove feather SVG icons library.

You can use custom svg icons as well as font icons with Vuexy HTML Admin Template.

To use other SVG Icons Library

Please follow below steps to add new library in your HTML:

  1. Include SVG font library in HTML file. You need to add JS and CSS file's CDN or download and add it to assets/fonts/ folder and include path in HTML files. It's safe to use assets/ folder to migrate easily with new updates in future
  2. Update current svg icon structure with another library's structure. Like we are using data-feather="feather feather-heart" for feather SVG, you can update this with your new svg icon format
  3. You might need to update base size if you find any changes according to your updated SVG icons
  4. You can also add custom css inside assets/css/style.css to update/overwrite specific style of SVG icons.

You are done!

To use Font Icons Library in place of SVG

Please follow below steps to add new font icon library in your HTML:

  1. Include CDN or download font icon library and add it to assets/fonts/ folder and include it's JS and CSS file in HTML files. It's safe to use assets/ folder to migrate easily with new updates in future
  2. Update current svg icon structure with font icons. For example we integrate font awesome. Update <i data-feather="heart"></i> feather SVG to <i class="fa fa-heart"></i> font awesome icon
  3. If you are removing feather SVG fonts then make sure you update all the feather SVG icons with your font icons
  4. You might need to update base size if you find any changes according to your updated SVG icons.

You are done!

Since Vuexy is a template and a starter project, it’s built as the starting point of your project. It cannot be simply installed and used with an existing project like a third party library.

Although using Vuexy with any existing project is still possible, it would require extra work to connect everything together. We strongly recommend you to either start your project with Vuexy, or move your project on top of it to have the best experience.

How to update search & bookmark list?

Vuexy Admin gives facility to search page and directly go to that page on click. This also provide bookmark feature, using that you can bookmark any page so that user can access that pages easily.

We are using search.json file for both search and bookmark list. You can find this file inside app-assets/data/ folder.

Now, Let's have a look at how to update the array list of this file. You can update this file list as per your requirements. Below is the format of an item:

{ "name": "eCommerce Dashboard", "url": "dashboard-ecommerce.html", "icon": "home" },
      

Following is the details of all json list items:

Attribute Details
name Using which name you want to search this page.
url URL of the page
icon Icon you want to show before the page name. We have used feather svg icons so using only icon name here.

Vuexy Admin allows you to easily manage minimum required vendors for the template.

You can manage vendors from app-assets/vendors folder which contain all the vendors CSS and JS files in css/ and js/ folder. It also contains minimum required vendors bundled CSS vendors.min.css and JS vendors.min.js file.

To manage the vendors, Vuexy Admin Template uses config.json file which includes source & destination path, vendors array, etc. as below:


"vendors": {
  "js": [
    "jquery/jquery.min.js",
    "popper/popper.min.js",
    "bootstrap/bootstrap.min.js",
    "perfectscrollbar/perfect-scrollbar.min.js",
    "hammer/hammer.min.js",
    "unison-js/unison-js.min.js",
    "blockui/blockui.min.js",
    "pace/pace.min.js",
    "waves/waves.min.js",
    "internationalization/i18n.min.js",
    "internationalization/i18n-xhr.min.js",
    "internationalization/lang-detector.min.js",
    "internationalization/i18n-jquery.min.js",
    "feather-icons/feather-icons.min.js",
    "forms/spinner/jquery.bootstrap-touchspin.js"
  ],
  "css": [
    "perfect-scrollbar/perfect-scrollbar.min.css",
    "pace/pace.min.css",
    "waves/waves.min.css",
    "flag-icons/flag-icons.min.css",
    "feather-icons/feather-icons.min.css",
    "forms/spinner/jquery.bootstrap-touchspin.css"
  ]
}

      

You can add/remove minimum required vendors for the template from this vendors array. To generate vendors bundle we have created the following gulp command which will bundle CSS and JS from the config.json's vendors array.

Gulp task gulp dist-vendor-css to generate combined vendor CSS file in app-assets/vendors/css/vendors.min.css. It includes all required CSS vendors for this template.

Gulp task gulp dist-vendor-js to generate combined vendor js file in app-assets/vendors/js/vendors.min.js. It includes all required JS vendors for this template.

Vuexy Admin provides app-assets/vendor/ folder that contains js/vendors.min.js and css/vendors.min.css files for vendors js and css.

Find config.json file in root folder. And Follow below steps to remove pace loader

  1. Remove included pace/pace.min.js from vendors > js array
  2. Remove included pace/pace.min.css from vendors > css array
  3. Execute gulp dist-vendor-js command to generate vendors.min.js file in app-assets/vendors/js folder.
  4. Execute gulp dist-vendor-css command to generate vendors.min.css file in app-assets/vendors/css folder.

You are done!

Vuexy admin provides built-in support to sync user-preferred dark/light mode with localStorage.

Ex: If the user has selected dark mode and on refresh, he/she wants to keep that mode persistent.

To enable this you just need to uncomment the below line from app-assets/js/core/app.js ~ line no 996

         // Set layout on screen load
//? Uncomment it if you want to sync layout with local db
setLayout(currentLocalStorageLayout);
      

It will enable to store of the preferred user light/dark mode and make it persistent

Vuexy admin provides built-in support to sync user-preferred collapsed menu with localStorage.

Ex: If the user want to collapsed menu, he/she wants to keep that menu persistent.

To enable this you just need to comment/uncomment the below line from app-assets/js/core/app.js ~ line no 55

      // if ($body.hasClass('menu-collapsed')) {
// ? replace above if condition with below one for menu collapsed localstorage
if ($body.hasClass('menu-collapsed') || localStorage.getItem('menuCollapsed') === 'true') {
compactMenu = true;
}

Also, need to uncomment the below line from app-assets/js/core/app.js ~ line no 376

      // ? uncomment below code for menu collapsed localstorage
// Save menu collapsed status in localstorage
if ($body.hasClass('menu-expanded') || $body.hasClass('menu-open')) {
localStorage.setItem('menuCollapsed', false);
} else {
localStorage.setItem('menuCollapsed', true);
}

It will enable to store of the preferred collapsed/expanded menu and make it persistent