Vuejs-Admin
  • Introduction
  • Installation
    • Laravel Installation
    • Vue Installaion
  • App structure
    • Layout
    • Vuex store
    • Left menu
    • Routes
    • Axios
  • Start new page
  • SASS
  • Changing skins
  • Changing Layouts
  • FAQ's
  • Updates
    • 3.4
    • 3.3
    • 3.2
    • 3.1
    • 3.0
    • 2.0
    • 1.6
    • 1.5
    • 1.4
    • 1.3
    • 1.2
    • 1.1
  • Starter kit
    • Adding new page
Powered by GitBook
On this page

Was this helpful?

Changing Layouts

Changing the Layout to your desired one involves changing some names and commenting or commenting out some code in the file named with layout.vue

1)Boxed Layout:

To get the boxed layout comment out the following line:

<style lang="scss" src="./components/layouts/css/boxed.scss"></style>

2) Fixed Menu:

To get the Fixed Menu comment out the following line:

<style lang="scss" src="./components/layouts/css/fixed-menu.scss"></style>

3) compact-menu:

To get the Compact-Menu change the following line in layout.vue:

import left_side from "./components/layouts/left-side/compact-menu/left-side.vue";

and set the left menu width in fixed-menu.scss to 100px

4) centered-logo:

To get the centered-logo comment out the following line:

<style lang="scss" src="./components/layouts/css/centered-logo.scss"></style>

5) Fixed Header:

To get the fixed header import the vueadmin_header from fixed-header.vue like this:

import vueadmin_header from "./components/layouts/header/fixed-header.vue"

Note:There are three header vue files available:

  • header.vue

  • fixed-header.vue

  • no-header.vue

PreviousChanging skinsNextFAQ's

Last updated 5 years ago

Was this helpful?