Enjoy the Vue
☝️ Who generated that heading?
That heading came from a wrapper layout. If you check out this page's source (vue-page), you'll notice some frontmatter applied between those
---
blocks:
- title:
- The title we'll apply as the page heading and the browser tab title. You'll see this applied using
{`Enjoy the Vue`}in the layout file described below 👇 - layout:
- The name of the layout file to apply. In this case,
layout: layouttranslates to_includes/layout.njksince 11ty looks in the _includes folder by default.
You'll notice this page is wrapped in a layout. This pulls in a few parameters using 11ty's data cascade:
-
titleuses the "title" attribute from our page's front matter. -
content | saferenders our page.
To create the page you see here, we placed a vue-page.vue file alongside the other pages on our site. That's because component pages are like any other template on your 11ty site, just with 1 extra superpower: you can hydrate the page with JavaScript.
Hydrating this page
We opted-in to shipping JavaScript using the hydrate key in our frontMatter. Learn more on our partial hydration docs.
Tip: try setting hydrate to "none", or removing the key entirely. The counter below should stop working! This is because we're no longer sending our component to the client, effectively turning Vue into just another templating language.
Count: 0
Front matter
Our included frontMatter wires up the layout and passes information "upstream" for other templates to read from. It works the same way for component-based pages as it does for 11ty's front matter. Here, the title key is accessible from any layout templates applied to our page.