#181: 📓 Big News from Nuxt.js – Introducing the Content and Components modules 🎉

May 24 · Issue #181 ·

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

📖 Read the issue online

Go to news.vuejs.org.

Submit new stories at news.vuejs.org/submit.

News

Vue.js

@vuejs

First appearing on @thoughtworks' Tech Radar under "Assess" in 2016, Vue has advanced to "Adopt" in its 2020 edition - the journey continues! https://t.co/GEVwxqzxjD

3:10 PM - 19 May 2020

Introduction - Nuxt Content

content.nuxtjs.org – Share

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.

Nuxt.js

@nuxt_js

Introducing @nuxt/components ✨

No need to import your components anymore 🎩

✅ Scan and auto import components
✅ Multiple paths with customisable prefixes and patterns
✅ Lazy loading support
✅ Hot replacement
✅ Support for library authors

https://t.co/lCJ5wySJXQ https://t.co/cnmQvAhG5I

2:55 PM - 18 May 2020

#17: Nuxt and Next Steps with Debbie O'Brien – Enjoy The Vue

enjoythevue.io – Share

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 – Justin Schroeder

dev.to – Share

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

Articles

Vue 3: Data down, Events up – Thorsten Lünborg

www.vuemastery.com – Share

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 - Gary Siladi

www.storyblok.com – Share

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 – Callum Macrae

macr.ae – Share

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 - Markus Oberlehner

markus.oberlehner.net – Share

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 - Web Dev Etc

webdevetc.com – Share

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 – Marc Backes

dev.to – Share

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 – Lachlan Miller

vuejs-course.com – Share

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 – Andrea Stagi

dev.to – Share

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 - Gábor Soós

dev.to – Share

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.

💚 Sponsors 💙

Storyblok

If you enjoy this newsletter, please consider supporting it. Thank you! 💚

Resources

GitHub - vue-a11y/vue-axe

github.com – Share

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

github.com – Share

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

github.com – Share

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

github.com – Share

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

github.com – Share

Prerender your single page application using this Netlify build plugin.

GitHub - davestewart/vue-class-store

github.com – Share

Universal Vue stores you write once and use anywhere.

Vue-class-store is a simple solution to state management, with Typescript and SSR support.

Did you enjoy this issue?

If you don't want these updates anymore, please unsubscribe .

If you were forwarded this newsletter and you like it, you can subscribe .

Powered by Revue

#180: 🏎 Say hi to Vite! A brand new, extremely fast development setup for Vue. So fast it feels instant!

Monday, May 11, 2020

Hey there, As you all know "Vue" in French stands for "View" and pretty much describes what Vue.js do May 11 · Issue #180 · View online Vue.js News Hey there, As you all know “Vue”

#179: 🎉 Vue.js v3.0-beta released! Check out the new State of Vue update from Evan You; Great things for TS users coming in Vue 3.0!

Tuesday, April 21, 2020

Hello friends, long time no see. Sorry about that. Have you been missing the newsletter? I sure hope April 19 · Issue #179 · View online Vue.js News Hello friends, long time no see. Sorry about that.

#181: 📓 Big News from Nuxt.js – Introducing the Content and Components modules 🎉

Older messages

#180: 🏎 Say hi to Vite! A brand new, extremely fast development setup for Vue. So fast it feels instant!

#179: 🎉 Vue.js v3.0-beta released! Check out the new State of Vue update from Evan You; Great things for TS users coming in Vue 3.0!

You Might Also Like

Quick question

Kotlin Weekly #404 (NOT FOUND)

📲 Why Is It Called Bluetooth? — Check Out This AI Text to Song Generator

Daily Coding Problem: Problem #1425 [Easy]

PD#571 Software Design Principles I Learned the Hard Way

When Procrastination is Productive & Ghost integrating with ActivityPub

C#503 Building pipelines with System.Threading.Channels

RD#453 Get your codebase ready for React 19

☁️ Azure Weekly #464 - 28th April 2024

Tesla profits tumble, Fisker flatlines, and California cities battle for control of AVs