Create pages

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

Every template comes with a set of ready-made pages that you can use to create other pages (e.g. Home, Secondary, Login, Sign up). You can build a SPA (single-page application) or create more pages accordingly with your needs. Let's see how to do that.

All pages (or "views") are stored into the src/views/ directory.

Create a new page

To add a new page, create a new file (for example, About.vue). Now import all required components, for example 👇

<template>
<fragment>
<c-generic-section>
<c-section-header :data="sectionHeader" class="center-content" />
<p>Your content</p>
</c-generic-section>
<c-cta top-divider split />
</fragment>
</template>
<script>
// import layout
import CLayout from '@/layouts/LayoutDefault.vue'
// import sections
import CGenericSection from '@/components/sections/GenericSection.vue'
import CSectionHeader from '@/components/sections/partials/SectionHeader.vue'
import CCta from '@/components/sections/Cta.vue'
export default {
name: 'Home',
components: {
CGenericSection,
CSectionHeader,
CCta
},
created() {
this.$emit('update:layout', CLayout)
}
}
</script>

Set a Route

Now you need to add a new route for the about page. Open the src/router.js file to add a route 👇

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
],
mode: 'history'
});

Choose a page layout

As you may noticed, inside the About.vue file we have defined the layout to be imported. In this case, it's LayoutDefault.vue file.

We have included 3 different page layouts, and they can be found in src/layouts 👇

  • LayoutDefault.vue is the default page layout, and it is made of a header, a main section that is supposed to include the "view" content and a footer.

  • LayoutAlternative.vue is looks much like the previous one. In this layout we are including a different footer configuration (i.e. Footer - Config. 2).

  • LayoutSignin.vue is the layout we are using for Login and Sign up pages. It doesn't include a footer and header links are hidden.

You can create how many page layouts you want by duplicating the existing ones.