JavaScript Frameworks

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>

<home-page
  :page-data="{{ Statamic::modify($page)->toJson() }}">
</home-page>

Assemble selective JSON inside Antlers/Blade 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>

<home-page
  :navigation="[
   @foreach (Statamic::tag('nav:main_navigation') as $navPage)
      {
        title: '{{ $navPage['title'] }}',
        slug: '{{ $navPage['url'] }}',
        id: '{{ $navPage['id'] }}'
      },
   @endforeach
 ]"
></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>

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.