Video

Learn how to create a headless Wagtail website using Vue.js — from scratch

Code & steps

Learn how to create a Headless Wagtail CMS website and have Vue.js consume data from the API.

In this workshop we will:

  1. Create a new Wagtail website
  2. Create a custom Wagtail Page
  3. Enable the v2 API
  4. Explore Vue.js, Vue Components, Vue Routing, and Axios
  5. Work with a custom Image Rendition serializer
  6. Serialize StreamFields
  7. Install and enable headless preview

All code is available at https://wagtail.io/headless-workshop/

Extra resources:

Big thank you to Torchbox and Tom Dyson for all the work you've put into making this workshop possible, and a reality.

Sign up for our newsletter

Get notified about new lessons :)