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.

Examples:

• 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 -->
<script>
    export default {
        props: ['id']
        routePath: ':id/details'
    }
</script>
<template lang="pug">
    div
        h1 Page /admin/page-with-param/{{ id }}/details
        p Details for ID {{ id }}
</template>

Page layout

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

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

User interface and styles

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