Installation

You should add the fullpage to your root vue instance:

components: {
	fullpage: require('z-fullpage/fullpage.vue')
}

After installation, you should refer to the style.less file, which includes all the styles for the fullpage.

For Laravel Mix, add the following to your webpack.mix.js

mix.webpackConfig({
	resolve: {
		alias: {
			'fullpageStyle.less': path.resolve(__dirname, 'node_modules/z-fullpage/style.less')
		}
	}
});

Example template:

<fullpage>
	<div slot="header" id="heading-container">
		<router-view name="heading"></router-view>
	</div>
	<div slot="content" id="content-container">
		<statusbar layout="october"></statusbar>
		<router-view></router-view>
	</div>
	<div slot="footer" id="footer-container">
		<fullpagefooter>
			<v-link route="link1">title1</v-link>
		</fullpagefooter>
	</div>
</fullpage>

The footer slot is optional. If you dont like a footer - just remove that part. The footer will be a sticky footer that is always on the bottom of the page.
Also the statusbar is optional (see below).

Props:

backgroundcolor

Set the Background Color of the body:

<fullpage backgroundcolor="#00ff00">

padding

Normally, the Content container has a padding of 10 px. If you dont want this in certain situations, set the padding to false:

<fullpage :padding="false">

Add a Heading

You should install "z-ui" and include the heading component.

npm install z-ui

Then, you can apply a heading to your fullpage. You should do this in the route (see the example route file in 'examples').