A presentation at CityJS Conference by Debbie O'Brien
What’s new in Nuxt
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
NuxtJS 2M Seed Round debs_obrien
1 million Downloads debs_obrien
debs_obrien Nux t Am bass ador s
debs_obrien
er Le tt xt Nu debs_obrien
New Docs New guides are live debs_obrien
debs_obrien
debs_obrien
debs_obrien
Docs English, Spanish, Portuguese, French Chinese, Japanese, Korean Indonesian, Persian, Russian …. debs_obrien
debs_obrien
debs_obrien
debs_obrien
New Architecture Content Module debs_obrien
Nuxt v2.14 Auto import components Smart Generate Crawler Live Preview debs_obrien
Docs Resources section Modules and Examples Nuxt Quiz Nuxt Videos debs_obrien
Website New Design Coming soon….. debs_obrien
More Nuxt Modules debs_obrien
Nuxt Modules debs_obrien
Nuxt Modules debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
Content Module 78K+ 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
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
What have we been up to in the last 6 months at NuxtJS and cool modules we have created. Let’s take a look and also deep dive into my favourite one.
Here’s what was said about this presentation on Twitter.
