Happy New Year! Below is a jam-packed issue to catch you up on all of the recent happenings. Enjoy!

Releases

vue-next v3.0.5

Note: this release contains a type-only change that requires TypeScript 4.0+, which may cause build issues in projects still using TS 3.x.

Vue Devtools v.6.0.0-beta.3

Happy holidays! Welcome to another update about the new Vue Devtools! Headline: a lot of new features and refinement has gone into the Timeline.

VueUse v4.0.0

Collection of essential Vue Composition Utilities

Community & Posts

vite: Future Plans Discussion

A discussion on the changes and roadmap coming for vite.

First of all, I think I rushed it when I put Vite under 1.0-rc state. There are definitely still some rough edges that I want to improve that may result in non-trivial breaking changes...

vite development is moving fast. Make sure to stay up-to-date on all the happenings if you're evaluating or already using:

Oruga UI

Oruga is a lightweight library of UI components for Vue.js without CSS framework dependency

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly

Element UI for Vue 3.0 is coming!

Element Plus, the first UI component library written in TypeScript + Vue 3.0 Composition API, is released today!

After 23 alpha versions of heavy developing, we are glad to announce that Element Plus for Vue 3.0 Beta is available TODAY!

pev2

A VueJS component to show a graphical vizualization of a PostgreSQL execution plan.

<div id="app">
  <pev2 :plan-source="plan" :plan-query="query"></pev2>
</div>

Nuxt Tailwind v3.4.0 is out with the config viewer ✨

https://twitter.com/nuxt_js/status/1339630526408384512

Nuxt Tailwind will expose a /_tailwind/ route in development so you can quickly visualize your tailwind configuration with easy copy pasting, thanks to the awesome tailwind-config-viewer package ✨

AnimXYZ

The first composable CSS animation toolkit.

AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.

Docs | AnimXYZ

The first composable CSS animation toolkit

eCharts is an Apache Incubator project which provides easy solutions for good looking and complex data visualizations. In this talk you will get an insight about how to create simple charts as well as complex oder 3D charts.

Contents of the talk:

Setup of VueJS and eCharts
Create a simple Chart
Create dynamic chart
Useful Utilities for depicting Data
How to make fancy charts and cool 3D charts

In other news

CodeSwing 🎢

CodeSwing is an interactive coding environment for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but available directly from your highly-personalized editor: themes, keybindings, and extensions...oh my!

Source Map Visualization

This is a visualization of JavaScript/CSS source map data, which is useful for debugging problems with generated source maps. It's designed to be high-performance so it doesn't fall over with huge source maps.

Jan. 11, 2021, 10:07 p.m.

VueWeekly.dev - Issue #22 - The future of vite + Oruga UI & Element UI for Vue 3 🎨