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
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
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
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
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
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
Prerender your single page application using this Netlify build plugin.
GitHub - 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.