Skip to main content

Creating a page

You can create custom pages and adding them to the menu.

Creating the page​

A page is just a vue component. Let's create a home page (pages/Home.vue):

pages/Home.vue
<template>
    <q-page class="flex flex-center bg-white">
        <q-img
            style="max-width: 500px;"
            src="https://uploads-ssl.webflow.com/5e3ce2ec7f6e53c045fe7cfa/6020c6816bbd79576b4a45ce_Frame%2015.png"
            srcset="https://uploads-ssl.webflow.com/5e3ce2ec7f6e53c045fe7cfa/6020c6816bbd79576b4a45ce_Frame%2015-p-500.png 500w, https://uploads-ssl.webflow.com/5e3ce2ec7f6e53c045fe7cfa/6020c6816bbd79576b4a45ce_Frame%2015.png 600w"
        >
        </q-img>
    </q-page>
</template>

<script>
    export default {}
</script>

Adding a route​

In app/router/routes.js we can add our route:

app/router/routes.js
{ 
    path: 'home', 
    component: () => import('src/pages/Home.vue'), name: 'home' 
}

Finally, we can make a link to our home page in our menu. In Http/Controllers/Globals/MakesMenu.php:

$this->addTabItem(0, [
    'icon' => 'home',
    'route' => '/home',
    'title' => 'Home',
    'permissions' => []
]);

Usage​

You can make custom requests in your template:

this.$api.get(`myurl`).then(({data}) => {
    //
})

Use translations:

this.$t('Are you sure?')

Or in the template:

<span class="q-ml-sm">{{$t('message')}}</span>

Check permissions:


<q-btn
    v-if="$can('update users')"
    :label="$t('My label')"
>

Custom page title​

You can make custom a custom page title by using the helper method $setDocumentTitlte():

mounted()
{
    this.$setDocumentTitle('Custom Title')
}