Archive search

Find the stories you need

tools

tiptap – the headless WYSIWYG editor now supports Vue 3.0

tiptap is the most popular text editor library for Vue. Version 2 is a complete re-write in TypeScript and comes finally with support for Vue 3.

vno: a vue / deno love story

Deno is a new runtime for JavaScript and TypeScript. Since you can’t use it directly with Vue-CLI (which requires Node.js), the community has created vno, a CLI tool for Deno to compile and bundle Vue single-file components. Impressive!

Building a Vue Auto Component Importer - A Better Dev Experience

Another article by Harlan Wilton, where he dives into webpack loaders to explain how you can build a loader that will allows for automatic component resolution at compile time.

Enjoy the Vue #45: Using Code as a Tool for Creative Expression with Pine Wu

Check out the new Enjoy the Vue podcast episode with Pine Wu, the author of the popular VS Code extensions called Vetur.

Vue Flow Form - Open Source Form Generator Built with Vue.js

Vue Flow Form is a form generator tool for developing custom, conversational forms. It's a free, open-source, and self-hosted solution built with Vue.js.

Release v6.0.0-beta.1 · vuejs/vue-devtools

The new v6.0.0-beta.1 release of the Vue-Devtools introduce the support for Vue v3.0.0-rc.1. You can get the Chrome extennsion here.

For Firefox version and standalone Electron build, visit the release page.

Make Libraries Work with Vue 2 and 3

Probably my favorite news this week! Anthony Fu created Vue-Demi. A utility library that allows you to ship 1 version of your Vue library that will support both Vue 2.x and Vue 3.0 at the same time. All you have to do is change your composition-api imports from either “vue” or “@vue/composition-api“ to “vue-demi”. The library will automatically use the available source for those functions based on the environment. Can’t wait to try it out with the new Vuelidate version.

Vetur: status quo, development, sponsorship and direction

Vetur is likely known to everyone who uses Visual Studio Code to work with Vue – it’s an extension that supercharges your editor with numerous features. Read about the future plans for the extension written by the creator – Pine Wu.

⭐️ If you would like to support his work on Vetur and the Vue Language Server, you can now support Pine through GitHub sponsorship!

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.

Vuetensils 0.6: Simpler Forms, Better Accessibility, & Useful Filters!

The latest version of Vuetensils has some really cool features: improvements to form authoring, accessibility updates, and new filters to make life easier.

How To Build A Plugin With Gridsome

In this tutorial, we go through the process of building a Gridsome Source Plugin for ButterCMS from scratch. Gridsome allows us to fetch data from local files or external APIs and headless CMS and store the data in a GraphQL layer that lets us extract only the data we need and use it our Vue.js components.

Vuetensils v0.4 released – Austin Gil

The latest release of Vuetensils (a Vue UI framework that is focused on accessibility) comes with 2 new components and several handy directives.

v6.0.0 · vuejs/eslint-plugin-vue · GitHub

Eslint-plugin-vue v6.0.0 has been released! This includes support for Eslint v6.0. Along with the eslint plugin release, other eslint-related libraries have also been updated: eslint-config-typescript and eslint-config-prettier.

Vapperjs - A Vue-based SSR framework

HcySunYang introduces Vapper – a new SSR framework based on Vue, the motivations and philosophies behind its creation, and what sets in apart from existing solutions like Nuxt or Quasar Framework.

Release v5.3.0 · vuejs/vue-devtools · GitHub

⚙️ Browser devtools extension for debugging Vue.js applications. - vuejs/vue-devtools

How to make provide/inject reactive

Although you probably shouldn’t abuse provide/inject in your applications, sometimes it’s the perfect tool to solve a specific problem. However, what you might notice is that usually injected properties don’t really stay reactive. And that’s how it works by design. But there is a trick you can use to make those properties reactive. Or you can use Thorsten’s vue-reactive-provide plugin.

Vue Camera Gestures - Add AI powered gesture controls to your app in 1 line of HTML

What if you could pop a unicorn in your app whenever the user had a super bored face? Or play a loud irritating sound when they close their eyes? Well, you probably shouldn’t, but this article might help you if you still wanna do it. Though it starts with something simpler – hand gestures. Great read! Powered by Tensorflow!

15 Must-Have Vue Directives That Will Significantly Maximize Your Productivity

From input masking to a clipboard helper, from tooltips to dummy texts, here come the 15 ultra useful Vue directives to aid you in the next project, neatly collected by Nada Rifki. Know one that's not listed? Well, we await your PR at awesome-vue 😉.

Announcing Bit for Vue Public Beta

Share and reuse Vue components between projects and applications. Build a reusable Vue component design system from real code. Build, distribute and collaborate over Vue components. Build as a team.

Vuetify color theme builder

Updated for Vuetify 2. Now you can build a light and a dark theme at the same time.

Easily build unique, accessible, and lightweight Vue components

Probably we all had this issue, where we had to pick either an existing component library or build everything ourselves to fulfill the requirements. Especially if we care about accessibility (and we should!). In this article, Austin suggest the usage of Vuetensils – a component framework that by itself is completely bare (when it comes to how it looks) and instead focuses accessible and easy to style.

Tips for Vue Developers Picking Up NativeScript

Just got started with building native mobile applications using NativeScript and Vue? Here’s a great article that will help you pick up some of the most useful plugins (from the NativeScript Marketplace) and point you to other learning materials to get you up to speed.

New Vue.js UI/UX Framework

Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications.

Release v0.8.0 · buefy/buefy · GitHub

One of my favorite UI components libraries for Vue has just released a new version that includes a few new components like a navbar and a progress bar, as well as a few breaking changes when it comes to importing the components. Careful when you update!

How to Add Internationalization to a Vue App

Here’s a beginners guide to adding internationalization (multiple languages support) to your Vue application using the vue-i18n library.

The Quickest, Dirtiest, Automatic…est Vue Documenter Ever

This one is a rather interesting approach to documenting your Vue components. I’m not exactly convinced by actually putting the documentation required information inside your production code, but I assume this could potentially be somehow fixed with a webpack plugin. Still an interesting concept!

Release v2.0.0 · vuetifyjs/vuetify · GitHub

Here’s a biggie! Vuetify v2.0 "Arcadia" has been officially released after 8 months of work and several beta releases. There are just so many changes that have been done you got to read the release notes yourself.

Next-generation async functions with Vue Async Function

Even though the Vue Function API isn’t here yet, the community has already started picking it up thanks to the vue-function-api library that allows you to use it before it ships in Vue 3.0. Here’s a great article that explores how it can be used to build async functions for data fetching inspired by React-Async.

What is VueFront?

Have you heard about VueFront (not mistaken with Vue-Storefront)? It’s a project that allows you to extend your CMS like Wordpress or Magento (using a corresponding plugin) to be able to easily connect it to VueFront-based Single-Page Application.

Debug VueJs Jest tests in vscode

Did you know that you can literally debug your tests inside your VS Code? I always forget about that, but I imagine this might be extremely useful, just throwing a debugger somewhere in a test and see what is happening right in your editor. Try it out!

Vue Functional Calendar — Modern calendar in your projects

Lightweight, high-performance calendar component based on Vue.js

What's New in vue-styleguidist 3.0

Vue-Styleguidist is a powerful tool that helps you develop your apps components in a controlled environment. The new version ships with several new features and this article explains them all. The features include: automatic type detection when using TypeScript and Flow, Class-style component declarations and several quality of live improvements.

Quasar 1.0 — Reaching for the Stars

Quasar is rapidly reaching v1.0 with the 1.0.0-beta.0 release. Read the article for the whole list of all the new changes and features (there’s a ton of them!).

Vuethereum: The Vue library Ethereum deserves

Blockchain is surely one of the hottest buzzwords for a while now and more and more developers opt to build decentralized applications. For that they can use the Ethereum platform, but as will all rising platforms, the start is always the hardest. The Matryx Team has created a set of components under the name Vuethereum that aims at making it all easier. Check it out.

Learn How To Build A Data-Driven Search UI With Vue.js

An interesting article on how to build a powerful search view with Vue.js and ElasticSearch, by using a component library called ReactiveSearch.

Prettier now supports Vue!

Great news! Prettier – the popular code formatter, is now supporting Vue! This includes template features like v-for, slot-scope and others.

VeeValidate 2.1: Validation Providers

A very interesting article that covers how the new addition to VeeValidate, namely Validation Components. It’s an interesting idea that makes ti possible to use components with scoped-slots to provide your form with customised validation rules and more!

Release 🚀 Release 1.0.0 · posva/vue-promised · GitHub

Vue-Promised is a great library by Eduardo San Martin Morote aka Posva, that let’s you solve the popular problem of how to handle displaying components when the data is still being fetched. Thanks to Vue-Promised, you can easily show a different component when the API request is still underway, when it completes and also when it fails. Used as a component with a set of slots. No need for special flags just to show a spinner.

Gridsome - Build blazing fast websites with Vue.js and GraphQL

Gridsome is a blazing-fast static site generator for building PWA & SPA front-ends for any CMS or data source with Vue.js and GraphQL.

You can deploy it as a server-side rendered app or a statically generated page.

A simpler way to use Vuex in Typescript with DI

One common issue that TypeScript users have with Vuex is that it’s very hard to reach type safety. In this article, Sascha Braun shows how you can use his new library called vuex-simple for exactly that, using the dependency injection pattern. Definitely worth reading if you use TypeScript and Vuex.

Deep Dive Into The New Vue Devtools v5.0

Here’s an article that covers most of the latest improvements that shipped in the Vue Devtools v5.0 beta. Those developments include the new router tab, where you can review router history as well as a list of all the routes. Also, you can now modify the store state inside the Vuex tab. Last but not least – the Performance tab, where you can now measure different aspects of your components performance like time-to-start.

GitHub - guanzo/vue-smooth-reflow

A Vue mixin that transitions reflow. When the component's data is changed, any CSS properties that you register will transition to its new value.

Release v2.1.2 · shentao/vue-multiselect · GitHub

Universal select/multiselect/tagging component for Vue.js

GitHub - vue-electron/vuex-electron

Integration of Vuex and Electron

Shards Vue - High-Quality & Free Vue UI Kit

Shards Vue - High-Quality & Free Vue UI Kit

A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components.

UIkit with Vue.js — Vue-CLI 3

Speaking of UI frameworks – here’s an article by Aravind Voggu that will show you how to set up UIkit through the new Vue CLI 3.0.

Choosing the Right Front-End Framework for Your Vue App

When building Vue apps we often don’t have the time to build all the commonly used components from scratch. Instead we can pick from several UI frameworks built on top of Vue, like Vuetify, ElementUI, Buefy or Bootstrap-Vue. Or even full blown frameworks like Quasar. In this article Andi Pavllo goes through some of the more popular options and evaluates their pros and cons.

Vuidget — How to create an embeddable Vue.js widget with vue-custom-element

Web components are a great encapsulation target when you need to create a widget that can be embedded in different environments. Dana Janoskova shows how to transform Vue components into real custom-elements by using the vue-custom-element library. This can also be quite useful if you want to use Vue components next to other frameworks like React and Angular.

GitLab - demsking/vue-cli-plugin-env-validator

A Vue CLI Plugin to validate Environment Variables with type checking like Vue Props

GitHub - sagalbot/vue-select

A Vue.js component that provides similar functionality to Select2 without the overhead of jQuery. Just recently it hit the 2.5 version.

GitHub - joblocal/vue-mapfit

A SSR compatible vue component which provides a Maps View with Mapfit

GitHub - arturmiz/vuent

🎨 Vue.js components implementing Microsoft Fluent Design - arturmiz/vuent

tiptap – a renderless rich-text editor for Vue.js

This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.

Vue Toolbox

Vue Toolbox is a service that lists the best Vue.js libraries. Those are grouped together and can be easily searched.

The Vue Toolbox was created by Tiago Alves and Filipe Pina while learning Vue and wanting to give back to the community.

Vue.js D&D Combat Simulator

Robert Zehnder was looking to start a new Vue learning project, and tapping on his childhood passion of Dungeons and Dragons he decided to build a combat simulator using the 5th edition Dungeons & Dragons systems reference document.

Using Vue.js form-wizard

The next time you need to implement a multi-step form, where you need to show people progress as they fill out each page, maybe check out vue-form-wizard. Prajacta Khopkar recently wrote up a quick tutorial showing how easy it is to import and use in your project.

GitHub - Educents/vue-autosuggest

🔍 Vue autosuggest component.

Vue-autosuggest latest release - slots! 🎰

Vue-autosuggest just got a new release! Using that opportunity, Darren Jennings is sharing a small case study of how scoped slots can be used to simplify the API of components responsible for things like autocompletion.

Handling touch with Vue.js

Usually when developing websites, most developers focus on the desktop interactions leaving the interactions on mobile devices as they are. However, quite often it is the mobile devices where most of the visitors are using. Lisi Linhart explains how to handle different touch events using HammerJS with custom directives to improve make the overall mobile experience.

5 Vue CLI 3 plugins for your Vue project

Vue CLI 3.0 has been officially released just a few weeks ago and yet it already has more than 130 plugins available. In this article, Derick Sozo has prepared a list of 5 CLI plugins that solve different potential problems in your app.

tejzpr/Vue.TSX

Vue.JS boilerplate with Typescript and JSX

zh-rocco/vue-auto-storage

An automatic storage plugin for Vue2, persist the data with localStorage.

Whoops! We couldn't access this Tweet.

Vetur 1.0 Roadmap

Vetur is already a core tool for every Vue developer that is using Visual Studio Code. Just from looking at the roadmap, I feel it’s about to get even better!

Vue CLI 3.0 is here! – The Vue Point

Vue CLI 3.0 is here! – The Vue Point

Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI…

Using schemas to generate your forms with Vue, and more!

Building forms is usually quite easy. Unless – of course – it has to be generated dynamically depending on backend service response. In such cases many developers reach out to schema based solutions. There’s one such solution for Vue called vue-form-generator that can help you with that task. Here’s how to use it.

Managing async operations states in Vue components

Maxim Yelisyeyev has recently released a new plugin called vue-async-operations, which can help you manage state of asynchronous calls inside your component. Along the library, he also published an article that depicts how it can be used to increase your productivity while working with asynchronous data. The API reminds me of Vuelidate somewhat.

GitHub - grishkovelli/vue-audio-recorder

A simple audio recorder for VueJS applications

GitHub - AlbertLucianto/vue-text-highlight

Text highlighter library for Vue.js

Quasar & Quasar CLI v0.17.0 are out! SSR arrived. | Quasar Framework Community

Quasar is one of the most powerful frameworks on top of Vue and now it has an out of the box support for server-side rendering which also includes managing meta tags. You can support the project here on Patreon!

Vue.js Devtools Beta - Chrome Web Store

New Beta release channel for Vue.js Devtools

Coloring your app: Implementing Live Theming with Vue.js and Styled-Components

There are several ways to implement theming in your application. The most obvious solution would be to use CSS variables, however, those are not supported in older browsers. In this article, Dalila Avdukic shows how to implement live theming by using vue-styled-components that will work across all browsers.

How to build a real-time editable data table in Vue.js

Editable data-tables are quite common, especially in the business-to-business type of services. Here’s an article that explains how to build one using Vuetify and Hamoni Sync – a service that keeps your data synchronized between the client and the cloud.

Data Management with SQLite and Vuex in a NativeScript-Vue App

If you’re building a mobile application using NativeScript and Vue, you might want to learn how to connect Vuex with the local SQLite database.

Mand Mobile UI

A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios. Rich, flexible, practical, quickly build high-quality financial products, making complex financial scenarios easier.

GitHub - scalia/vuejs-tree

A highly customizable VueJs tree viewer

GitHub - vladocar/Minimal-Notes

Minimal Notes web app build with Vue.js

Building a VuePress site with the Netlify CMS

Quite often the argument against statically generated pages is that it is hard for non-developers to update. However, thanks to solutions like Netlify CMS this is no longer a problem. Here is a great article that explains how to configure it with VuePress.

How to create a custom VuePress theme with Vuetify

VuePress ships with a default theme that’s perfect for documentation purposes. However, what if you would like to build your own theme? In this article, Derick Sozo explains how to build one using Vuetify.

GitHub - EvodiaAut/vue-cookieconsent-component

A notification component that asks for consent for the usage of cookies

GitHub - kb10uy/vue-bubbler

A Vue plugin that enables bubbling of custom events

GitHub - basys/basys

Toolbox for building full-stack Vue.js apps

Keynote – Present with Vue.js

Keynote (vue-keynote) is a presentation library which enables you to declaratively create your slides using Vue.

Release v6.0.0 · vuejs/vue-rx

A new major version of vue-rx is here! Most important changes – introducing support for RxJS 6.0 and dropping support RxJS 4.0.