181Sunday, May 24, 2020
#181: 📓 Big News from Nuxt.js – Introducing the Content and Components modules 🎉

Hi there,

we’ve just had some incredibly exciting 2 weeks in the Nuxt.js world! First the Nuxt team released the components module, which allows you to skip importing Vue components manually as they will be automatically located and imported for you when you use them. With support for lazy-loading!

Just a few days later however, the team also released another module called content. It allows you to use local files (Markdown, JSON, YAML etc.) as a Git-based CMS. You can be familiar with this approach if you used VuePress or Gridsome. Of course, you can use Vue components inside your Markdown files. Make sure to check the docs!

Cheers, — Damian Dulisz


Stories

Introduction - Nuxt Content

Introduction - Nuxt Content

Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

#17: Nuxt and Next Steps with Debbie O'Brien

On today’s episode we have special guest, Debbie O’Brien, Head of Learning and Developer Advocate at Nuxt.js. Debbie tells us all about Nuxt. She even has an exciting announcement about a new release coming soon with Markdown in Nuxt that has the panel super excited!

Introducing Vue Formulate — Truly Delightful Form Authoring

Let's take a closer look at Vue Formulate and the problems it promises to solve for us.

Vue 3: Data down, Events up

In the latest article from Vue Mastery, Thorsten Lünborg explains how to take advantage of data binding in Vue 3, using good old options API.

How to create dynamic forms with custom validation in Storyblok and Nuxt.js

If you already know the basics of Storyblok and Nuxt, see how you can use Storyblok fields to write dynamic forms components in this hands-on tutorial. It also showcases how you can use Vuelidate’s dynamic validation rules to validate a dynamically generated form.

Building an animated COVID-19 tracker using Vue.js

Did you know that you can use Vue.js to create interactive, animated visualisations using SVGs? This is the first part of a two-part mini-series which will explore how you can do just that, by building an animated COVID-19 tracker.

Automatically Generate your Vue Router Configuration with vue-auto-routing

When designing very large JavaScript applications, you have to be very careful about how you structure your dependencies. One particular example of this is the router.js configuration file. Learn how to use the vue-auto-routing package to automatically generate the router configuration based on the directory structure.

Vue-Test-Utils Guide: Things You Might Not Know About Vue-Test-Utils

A large collection of useful tips on how to take advantage of less known Vue Test Utils features.

Create Your Own Vue.js From Scratch - 5 Parts Story

Have you ever wanted to write your own framework? In this cycle of articles you can learn how to apply features that you know from Vue.js from scratch, including a reactivity system and a virtual DOM.

Introducing Vite, the Fastest Dev Server Ever

Check out this tutorial on how to build a Storybook clone utilizing the "fastest dev sever ever" aka Vite!

How to build a Jamstack multi-language blog with Nuxt.js

As Jamstack is getting increasingly popular, there are some areas where we're still learning new things. One of them is adding internalization support. Learn how to do it using Nuxt and Strapi CMS.

The Vue 3.0 Upgrade Guide

While we're all waiting for an official Vue 3 documentation, Gábor Soós gathered a list of the biggest breaking changes along with a quick migration guide. Sure, if you used custom v-model configuration and relied on hand-written render functions you might still want to take a look at the RFCs.


Libraries

GitHub - vue-a11y/vue-axe

https://github.com/vue-a11y/vue-axe

A browser extension providing Vue integration for a popular testing tool that runs an accessibility audit for your website.

GitHub - vue-a11y/awesome-a11y-vue

https://github.com/vue-a11y/awesome-a11y-vue

A list of awesome things related to accessibility in Vue.js, including content such as debugging tools, accessible UI libraries, and learning materials.

GitHub - jakedohm/vue-accessible-tabs

https://github.com/jakedohm/vue-accessible-tabs

An accessible, unstyled `<Tabs>` implementation for Vue 2 Writing accessible custom tabs system is not an easy feat. Vue-accessible-tabs library takes care of the necessary logic and lets you focus on the styling.

GitHub - ktsn/vue-auto-routing

https://github.com/ktsn/vue-auto-routing

Generate Vue Router routing automatically. Tired of writing route declarations? Learn how to generate them based on folder structure, using this Nuxt-inspired plugin.

GitHub - shortdiv/netlify-plugin-prerender-spa

https://github.com/shortdiv/netlify-plugin-prerender-spa

Prerender your single page application using this Netlify build plugin.

GitHub - davestewart/vue-class-store

https://github.com/davestewart/vue-class-store

Universal Vue stores you write once and use anywhere. Vue-class-store is a simple solution to state management, with Typescript and SSR support.