New Wagtail Course! 🥳 The Ultimate Wagtail Developers Course

Tutorial Wagtail Version: 2.x

Headless Workshop (with Vue.js)

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

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.

Related tutorials

The Ultimate Wagtail Developers Course

This course covers everything from basic installation to advanced features like custom blocks and API integration, it's perfect for developers looking to enhance their skills with this powerful CMS.

Ultimate Wagtail Developers Course Logo