Create New Page

If you are new for laravel template, here you start with creating new page.


Basic Steps to create new page with Vuexy admin template:
  1. Create New View with blade.php extension under the resources->views->content->pages directory.

    Let's create a testPage for an example with filename testPage.blade.php and placing the below code in that file.

  2. @extends('layouts/layoutMaster')
    
    @section('title', 'Your Page Title') // change title accordingly
    @section('content')
    // your page content goes here
    @endsection
  3. Create Controller for different methods related to page. (Optional: You can use default controller also.)

    Add Configuration as per your requirements in controller as described here.

  4. php artisan make:controller {ControllerName} {-r}
  5. After creating file and controller you need to declare its route where it can be served on the browser.

    Suppose, you want to create this page to be serve on the route http://localhost:8080/pages/testPage , you need to define its routes in the resources->web.php file.

  6. use App\Http\Controllers\pages\TestPage;
    Route::get('/pages/testpage', [TestPage::class, 'index'])->name('dashboard-analytics');
  7. Add page link to vertical & horizontal menu. Find verticalMenu.json and horizontalMenu.json files inside resources/menu/ folder.

  8. Option 1: To add menu item as main menu:

    {
      "url": "pages/testPage",
      "name": "Test Page",
      "icon": "menu-icon tf-icons ti ti-home",
      "slug": "pages-testpage"
    },

    Option 2: To add menu item as sub menu:

    {
      "name": "Pages",
      "icon": "menu-icon tf-icons ti ti-file-text",
      "slug": "pages-testpage",
      "submenu": [
        {
          "url": "/pages/testPage",
          "name": "Test Page",
          "slug": "pages-testpage"
        },
      ]
    },
  9. For page searching options in navbar search box, add page link in search-vertical.json and search-horizontal.json inside public/assets/json/ folder.
  10. {
      "name": "Test Page",
      "icon": "ti-smart-home",
      "url": "pages/testPage"
    },
  11. Add page name to lang->en.json{all language json} file to display in multi language.
  12. "Dashboard"=> "Instrumententafel",
    "Modern"=> "Modern",

For Mix: You need to run the command yarn dev or yarn watch command in the project directory.

For Vite: You need to run the command yarn build or yarn dev command in the project directory.

To serve your project to localhost, you need to run the command php artisan serve.

© 2017- Pixinvent, Hand-crafted & Made with ❤️