Views

Views are just fancy components with a route and act as a singleton vs a component which would be seen more than once. From the top level of the project views are another collection located under ./collections/_views/*. Each view is a directory with the unique slug name of the view and three files with the same name but with the following extensions: *.coffee, *.html, *.sass. So exactly the same as how you make a component just in the _views collection instead.

Get Started

Example structure with a view called my-view:

 - collections/_views/
	- my-view/
		- my-view.html
		- my-view.coffee
		- my-view.sass

As these are just a bunch of jekyll collections, there are some caveats and things to note and some templates to use.

all files must start with jekyll front matter like so:

---
---

Structure

Make sure to read up on the HTML section of the components. There are some extra steps here the compnents don't have.

In the front matter there are the following frontMatter variables:

name	required	description
title	*	The title to be displayed in the tab of the browser and generally as the title.
order	*	Order in which the views are placed in the view list. Order = 0 if you want the view to be hidden from the view list.
permalink	*	SEO reasons like sitemaps and RSS/ATOM.
hideHeader		Optionally hide the auto generated header of the view. Defaults to false.

my-view.html

---
title: My View
order: 1
permalink: /my-view
hideHeader: false
jekyllVar: hello
---
{% raw %}
<p>{{ vuejsVar }}</p>
{% endraw %}

Build:

Content of components html file is generated into the header and wrapped in a div like so:

<script type="text/x-template" id="my-view">
	<div class="my-view">
		<p>{{ vuejsVar }}</p>
	</div>
</script

Functionality

Use the Coffeescript template below to get started with a views functionality. Notice the global routes array which stores all of the views and is added to the global vue instance which sets up all of the routing.

my-view.coffee

---
---
routes.push
	path: '/my-view/:viewParam'
	alias: '/my-view'
	component: Vue.component('my-view',
	    template: '#my-view'
	    computed:
	        vuejsVar: ->
           	@$route.params.viewParam
	)