Create pages in Vue

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 React and 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.