Wagtail Headless CMS Workshop (with Vue.js)

All code is available at wagtail.io/headless-workshop/
Wagtail for Beginners Course: learnwagtail.com/wagtail-for-...
Learn how to create a Headless Wagtail CMS website and have Vue.js consume data from the API.
In this workshop we will:
- Create a new Wagtail website
- Create a custom Wagtail Page
- Enable the v2 API
- Explore Vue.js, Vue Components, Vue Routing, and Axios
- Consume API data with Vue.js
- Work with a custom Image Rendition serializer
- Serialize StreamFields
- Install and enable headless preview
All code is available at wagtail.io/headless-workshop/
Extra resources:
Other Headless Tutorials: learnwagtail.com/search/?q=he...
Headless Preview: github.com/torchbox/wagtail-h...
Vue Cheat Sheet: codepop.com/Vue-Essentials-Che...
Vue Mastery: 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.
#wagtail #api #headless

[@jazzyj2899]

great tutorial, thanks Kalob! especially liked the fact that for a substantial portion of it you referenced the Vue parts with great detail (good for JS/Vue beginners like me since we're coming over from a mostly python/django background).

[@AirFuchs1]

Thanks a lot! Perfect tutorial.

[@kilrain_dev]

About the APIField name for the image, it's redundant because it doesn't need to be repeated unless you want it to have a different name. If you omit the source='image' then you don't have to change it, it will just work.

[@flushr2694]

Very nice tutorial. The only thing that bothers me is the flame in VSCode when you re typing xD Keep up the good work! Greetings from Germany :)

[@CodingForEverybody]

Is it too distracting?

[@flushr2694]

@@CodingForEverybody not really distracting. I'd rather say annoying. But maybe i'm the only one with that opinion ;-)

[@connorrichmond-clark2625]

@@flushr2694 nah I find it annoying as well but still great content

[@naynisoe9020]

Great tutorial Kalob! I have a noob question. How do we display slug in the url instead of news id?

[@AmoahDevLabs]

Nice video. Will be expecting more from Wagtail 4.2. Anyway, KALOB TAULIEN, how can you render the image in the streamfield in the vue template? You left out for we to try but some of us are still struggling to display the image. Could help now since it been 3 years and someone still needs this.

[@richardallen543]

Wow, that was great, though I think I need a beer to reset my brain after that 😂 I noticed an image embedded in the richtextblock doesn't come through - is there a way to pull those in as well?

[@akhillshetty2140]

Awesome!! Keep em coming - I'm trying to create a college website which will serve as a CMS to add, buy online courses. Can you suggest me how I can go about it or if you have any template suggestions for me. I'd appreciate your input on this! I'm a traditional Python/Django developer getting into Wagtail.

[@CodingForEverybody]

I have A LOT of advice on this. LearnWagtail.com is currently an LMS (Learning management system). So is codingforeverybody.com. I've made a number of these systems already. The biggest piece of advice I can give is: a) Think it all through first, even your custom user models. And, b) Keep it as simple as possible (that means using Stripe instead of Paypal). It's easy to make it complicated and create too many features. Start with the basics and work one step at a time.

[@maxwellatoms5765]

How can i serialize Pages models? Im trying to seralize a specific filtered queryset but i dont find information

[@jessehao590]

Looks good. One question is that this is public rest API, but how to share the permission of Wagtail on the Vue.js page?

[@bert9427]

Is it possible to link the vue app on the preview page instead of developing a separate one?

[@JasperScheper]

Nice video, thanks for showing. For me it feels like a lot of extra work to use vue with wagtail. I also have the feeling we lose some functionality this way. For example, render blocks with their own templates. I do love vue but I think I will stick with the 'traditional' way of using wagtail with django templates. What is your opinion about this?

[@boasorte6808]

Same

[@schoelwurst3249]

Hey Kalob thanks for the tutorial. One question is it possible to push data to the database with the Wagtail API?

[@CodingForEverybody]

No not by default. You'll need to write your own django rest framework serializers and views to handle that. The reason is due to security. If every page that was enabled through the API was writeable by an anonymous source, websites could get hijacked very easily.

[@iyurukov]

Is it possible to use a token after login, and return some filtered pages based on conditions? Through Wagtail API.

[@hazhohuman]

thanks Kalob, the Body part of the news pages doesn't show up, not in your video nor in my app, I think it is because of the Data type, your way(in the video) is fetching the only string values of the data sets.. any solutions or suggestions ???

[@CodingForEverybody]

Hi Hazh, Where abouts are you referring to? In the examples I go over the body shows up when its just richtext, and also when we convert it to a streamfield.

[@hazhohuman]

@@CodingForEverybody can you check the timeline at 25:42? the listed block is from the module you made, while the body is "RichTextField", what showing are (Title, Intro) nothing else, here in my code I filtered th HTTP request to fetch the date as well, but both of the date and the body values are not string data, the body contains HTML code and other contents such as images, in all cases, I tried many ways I couldn't solve the issue, could you please deeply check again?

[@CodingForEverybody]

This is the listing page, there isn't other data to display yet, it's just the title and intro. If you continue on in the video a bit, you'll see how we interpret HTML using Vue. And for the Date you likely want to use a custom serializer to format the date the way you want or use JavaScript to parse and reformat the date.

[@TheFunkogolik]

can you make tutorial for wagtail + graphql? :)

[@patricksarmiento4494]

You did a pip show wagtail without installing wagtail? I mean I know the setup, but it feel like thats misleading for some people who are starting

[@codewithadonis2889]

thanks Kalob, what about SEO ?

[@CodingForEverybody]

SEO is hard with SPAs. If you dont have server side rendering for your Vue/React app, bots with less JavaScript interpretation like BingBot won't be able to index your site very well and you'll lose all your rankings. Google usually can, but they strongly prefer to not make the user wait for everything to load via ajax, so SSR is preferred there as well.

[@codewithadonis2889]

@@CodingForEverybody thanks but the main issue now it when you use SSR you will lose dynamic side of the SPA right ?

[@CodingForEverybody]

@@codewithadonis2889 Nope, not at all. SSR is just a way to read your Vue/React components and render them as if it were a regular site - the page will still load the additional JavaScript so you continue to get all the dynamic SPA goodies. It's really just an initial page load.

[@kamoliddinvokhidov1921]

Hi! I really liked this tutorial. Could you help me to display image. i tried '127.0.0.1:8000/api/v2/images/' + block.value. I cannot access to dowload_url. how can i do it.

[@AmoahDevLabs]

I stabled on the same issue and I've tried several ways but nothing positive

[@onnot701]

Why not nuxtjs for ssr rendering

[@CodingForEverybody]

Nope, no server side rendering in this video. This is more about Wagtails API and consuming the data than it is about the JavaScript ecosystem.

[@nayburz]

Whoa whoa whoa. What happen to the fallout console?

[@CodingForEverybody]

Haha its ok for shorter videos, but for long videos it can become a bit much on the eyes.

[@diogosilva3152]

you should remove the flames from vscode. Those are annoying. Great video tho

[@nic4m]

please remove the flaming cursor :)