Headless Workshop (with Vue.js)

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:

• Other Headless Tutorials: https://learnwagtail.com/search/?q=headless
• Headless Previews: https://github.com/torchbox/wagtail-headless-preview
• Vue Cheat Sheet: http://codepop.com/Vue-Essentials-Cheat-Sheet.pdf
• Vue Mastery: https://www.vuemastery.com/

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