VueWeekly.dev - Issue #22 - The future of vite + Oruga UI & Element UI for Vue 3 🎨
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
vue-mention reaches v1.0
Mention component for Vue.js
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 and Vue.js
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.
