Existing Project Migration

Here, we answer your most common question, how to use our template in your existing project?


Vuexy Laravel Admin Template

The Vuexy admin template is not just a theme. It's more than it. It is a fully functional template that has much-interconnected functionality.

It's not like a WordPress theme to install in an existing project. We always suggest you, move your existing project into our Vuexy Laravel admin template.

If you try to move our template into your existing project it may break the UI and some functionality. It is not impossible to achieve the same approach. You have to deeply understand, the structure and every functionality of our template to achieve that.

Basic Steps to migrate an existing project into Vuexy
  1. First, you need to move your all views (blade) files into Vuexy's views folder.
  2. Now, extend our layouts as per your requirement in your existing pages.
  3. @extends('layouts/layoutMaster')
    
    @section('title', 'Your Page Name')
    
    @section('vendor-style')
    // your vendor style files goes here
    @endsection
    
    @section('page-style')
    // your page specific style files goes here
    @endsection
    
    @section('vendor-script')
    // your vendor script files goes here
    @endsection
    
    @section('page-script')
    // your page specific script files goes here
    @endsection
    
    @section('content')
    // your page content goes here
    @endsection
  4. Also, move your all controller into Vuexy's app -> Http -> Controller folder.
  5. Now, define your routes in web.php file to point your controllers.
  6. Move your assets like SCSS, JS files into the resource/assets/ folder.
    • Vite:If you use our existing folder to place your assets then you no need to define your compilation in the vite.config.js file.
    • Mix:If you use our existing folder to place your assets then you no need to define your compilation in the webpack.mix.js file.
  7. You can directly place your statics assets in the public folder. So, no need to compile it.
  8. Move your database migration into the migration folder in our template.
  9. Add your project dependency into composer.json or package.json file.
  10. Add your existing pages name into menus JSON files to add your page's links in the sidebar menu. You can find our menus files below location.
  11. /resources/menu/horizontalMenu.json
    /resources/menu/verticalMenu.json
  12. Also, add your page's name into lang JSON files to get the translation.
  13. 📂 lang
    ├── 📄 en.json
    ├── 📄 de.json
    ├── 📄 ar.json
    └── 📄 fr.json
  14. To search your pages from navbar search, add them into the below-mentioned search JSON files.
  15. /public/assets/json/search-vertical.json
    /public/assets/json/search-horizontal.json
  16. Above are some basic steps to migrate your project into Vuexy.👍
© 2017- Pixinvent, Hand-crafted & Made with ❤️