JavaScript Frameworks

There are many different approaches you could take to pass data to JavaScriptLand. Here are some suggestions on how to fetch, format, and hydrate (inject data) typical JavaScript components.

The examples below use Vue.js as the framework of choice, but these techniques will apply to most JavaScript frameworks.

Pass all page data directly to a component

This is probably the simplest possible method. You can encode all the page data into JSON and inject it directly into your component. The downside is that you'll be exposing all that data to the client-side, if that's a concern for your particular site.

<home-page
:page-data="{{ page | to_json | entities }}">
</home-page>

Assemble selective JSON inside Antlers and pass to components via props

This method is simple, best used for one-off situations. It provides you control over exactly what data you want to pass to your components, but is too messy to be used at a larger scale.

<home-page
:navigation="[
{{ nav:main_navigation }}
{
title: '{{ title }}',
slug: '{{ url }}',
id: '{{ id }}'
},
{{ /nav:main_navigation }}
]"
></home-page>

Fetching data from a collection

This method is used to fetch any entry-based data, not just that available on the current page.

<home-page
:footer-data="{{ footer as='entry' }}{{ entry | to_json | entities }}{{ /footer }}">
</home-page>
Hot Tip!

Live Preview only has the current page's data available to it. Trying to query collection data will not work.

The Content API

The Content REST API can be used on its own, or in conjunction with the above methods.

Here is a simple example component that fetches data using the asynchronous created() function. This data can then be used in the component or passed down to child components. The example uses the standard Fetch method but you can use any AJAX library (Axios, etc).

<template>
<section v-if="pageData">
<div>
{{ pageData.title }}
{{ pageData.content }}
</div>
</section>
</template>
 
<script>
export default {
data() {
return {
pageData: null,
}
},
async created() {
try {
const res = await fetch('/api/collections/pages/entries/home'); // Get the data from the API
const { data } = await res.json() // Convert it to JSON
this.pageData = data; // Assign the data to the components Data
} catch (e) {
// Handle your errors
}
}
}
</script>

Custom View Models

It is also possible to create a view model which will return only the data you require. However, this requires PHP knowledge.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →