A presentation at Vue.js Amsterdam Global by Debbie O'Brien
Nuxt as a headless CMS
Debbie O’Brien Head of Learning and Developer Advocate at NuxtJS Writer @Ultimate Courses @Vue School WhyTeacher Nuxt? Organiser @MallorcaJS, Vue Spain Debbie O’Brien @debs_obrien
Content Module 85K+ downloads debs_obrien
Content Module a git based headless CMS debs_obrien
What is a git based headless CMS? debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
Content App debs_obrien
Goodbye Wordpress Storyblok Prismic Strapi Sanity debs_obrien
What’s next debs_obrien
What’s next Git courses for all the marketing team Git courses for all management Git courses for my mother Git courses for everyone debs_obrien
debs_obrien
debs_obrien
debs_obrien
2 kinds of people debs_obrien
Content Module No login No user interface No nice save button What the hell does it have debs_obrien
Content Folder Markdown App JSON YAML CSV debs_obrien
content/articles/amazing-blog-post.md debs_obrien
How do we access our content? debs_obrien
Content Folder articles Folder App amazing-blog-post.md Fetch debs_obrien
For dynamic pages Important Folder inside content
<script> export default { async asyncData({ $content, params }) { slug=filename const article = await $content(‘articles’, params.slug) .fetch() } return { article } } </script>My amazing blog post debs_obrien
Important Important Returned object from fetch <template> <article> <nuxt-content :document=”article” /> </article> </template> This is what is inside the body of the markdown file debs_obrien
Title from yaml <template> <article> Description from yaml
<h1>{{ article.title }}</h1> <p>{{ article.description }}</p> <nuxt-content :document=”article” /> </article> </template> debs_obriendebs_obrien
debs_obrien
Features Prev and Next Table of Contents Code blocks Vue Components debs_obrien
Features Style your content Add a search field Live Edit 👀 debs_obrien
debs_obrien
Snippets Search Pagination Table of contents Dynamic routing debs_obrien
debs_obrien
And there’s more debs_obrien
debs_obrien
Content Docs Theme debs_obrien
yarn create nuxt-content-docs <project-name> debs_obrien
Features Content folder Static folder Tailwind config Easily add i18n Sort by category 👀 debs_obrien
Out of the Box Table of contents Previous and Next Search Light and Dark mode Link to edit page on Github Version and release notes debs_obrien
Components Alert List Badge Code Group Code Block CodeSandbox debs_obrien
Alert debs_obrien
List debs_obrien
Badge debs_obrien
Code Group debs_obrien
Code Sandbox debs_obrien
debs_obrien
debs_obrien
debs_obrien
Where do I start? debs_obrien
yarn create nuxt-content-docs <project-name> debs_obrien
content.nuxtjs.org debs_obrien
debs_obrien
debs_obrien
Welcome to Content debs_obrien
Welcome to Nuxt debs_obrien
Thank you Debbie O’Brien Head of Learning Developer Advocate Teacher Open Source Contributor debs_obrien
There are many headless CMS’s out there and they are fantastic, but what if you just want to write some markdown in your nuxt.js project. Do you really have to set up a a CMS just to do that? Welcome to the content module where you can just add it to your Nuxt project and write markdown easily and even include your Vue components and so much more.
Here’s what was said about this presentation on Twitter.
