33 lines
1.4 KiB
Plaintext
33 lines
1.4 KiB
Plaintext
{% extends "./base.njk" %}
|
|
|
|
{% block body %}
|
|
<div class="col col--1-3">
|
|
<h2>Simple Vue Component (Why would you do this?)</h2>
|
|
<p><em>Being a SSR Vue component that does nothing but render from a prop</em></p>
|
|
{% vue { component:"HelloWorld" } %}
|
|
{% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
|
|
{% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
|
|
</div>
|
|
<div class="col col--1-3">
|
|
<h2>Todo List</h2>
|
|
<p><em>Being a pretty standard interactive component. Also SSR rendered.</em></p>
|
|
{% vue { component:"ListComp"} %}
|
|
{% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
|
|
</div>
|
|
<div class="col col--1-3">
|
|
<h2>Music Player</h2>
|
|
<p><em>Being a pretty standard interactive component.</em></p>
|
|
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
|
|
<p>Hearse Pileup: Last Time</p>
|
|
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
|
|
<p>Hearse Pileup: Generation Y</p>
|
|
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
|
|
<p>Hearse Pileup: Pretty Shiny Things</p>
|
|
</div>
|
|
<div class="col col--1">
|
|
<section id="content" role="main" class="content-wrapper">
|
|
{{content|safe}}
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|