Custom pages

You can create a custom page within admin/src/pages directory. Any source file you create here is automatically mapped to a corresponding route with same name as a relative page path. Files named index.vue do not affect a route name.


  • admin/src/pages/section/index.vue -> /admin/section
  • admin/src/pages/section/item.vue -> /admin/section/item
  • admin/src/pages/route-with-dashes.vue -> /admin/route-with-dashes

URL postfix and parameters

You can provide additional route postfix for any of your pages by adding a routePath component field. It is convenient when you want dynamic URL segments to be mapped to component props. routePath should be compatible with vue-router path definition described here. Example:

<!-- admin/src/pages/page-with-param.vue -->
    export default {
        props: ['id']
        routePath: ':id/details'
<template lang="pug">
        h1 Page /admin/page-with-param/{{ id }}/details
        p Details for ID {{ id }}

Page layout

You can use a shared page component which provides a standard page layout with all necessary slots.

<template lang="pug">
        span(slot="title") Page title
            !=' '
            small Page subtitle
            //- home page entry is already here
            li: router-link(to="somewhere") Somewhere
            li There
        //- any page content bellow
            .box-body Page content

User interface and styles

You can find a big variety of style capabilities in the official AdminLTE demo page.

results matching ""

    No results matching ""