Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue layout

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

This Vue.js project shows a Full-Screen Layout. It uses Flexbox.
You can use this as starting point for your vue app.

This project has a header, footer, and three columns.

The center column contains the main content, left and right can be used for navigation.

vue layout

It has these features:

  • completely fills the screen.
  • the main content area is fluid center with fixed-width sidebars.
  • all columns are be the same height
  • footer always on bottom
    The vue-layout becomes a Flexbox component with Slots to accept other components.

Setup

You need npm to install this project.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Github: https://github.com/byrd1089/vue-layout


← vue time tag Circle menu with Vue.js →

© vuejsexamples.net - Privacy Policy - Cookie Policy