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.
Find the stories you need
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.
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!
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.
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 is a form generator tool for developing custom, conversational forms. It's a free, open-source, and self-hosted solution built with Vue.js.
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.
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 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!
Let's take a closer look at Vue Formulate and the problems it promises to solve for us.
The latest version of Vuetensils has some really cool features: improvements to form authoring, accessibility updates, and new filters to make life easier.
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.
The latest release of Vuetensils (a Vue UI framework that is focused on accessibility) comes with 2 new components and several handy directives.
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.
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.
⚙️ Browser devtools extension for debugging Vue.js applications. - vuejs/vue-devtools
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.
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!
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 😉.
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.
Updated for Vuetify 2. Now you can build a light and a dark theme at the same time.
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.
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.
Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications.
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!
Here’s a beginners guide to adding internationalization (multiple languages support) to your Vue application using the vue-i18n library.
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!
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.
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.
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.
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!
Lightweight, high-performance calendar component based on Vue.js
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 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!).
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.
An interesting article on how to build a powerful search view with Vue.js and ElasticSearch, by using a component library called ReactiveSearch.
Great news! Prettier – the popular code formatter, is now supporting Vue! This includes template features like v-for, slot-scope and others.
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!
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 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.
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.
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.
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.
Universal select/multiselect/tagging component for Vue.js
A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components.
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.
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.
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.
A Vue CLI Plugin to validate Environment Variables with type checking like Vue Props
A Vue.js component that provides similar functionality to Select2 without the overhead of jQuery. Just recently it hit the 2.5 version.
A SSR compatible vue component which provides a Maps View with Mapfit
🎨 Vue.js components implementing Microsoft Fluent Design - arturmiz/vuent
This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.
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.
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.
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.
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.
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.
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.
An automatic storage plugin for Vue2, persist the data with localStorage.
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!
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…
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.
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.
A simple audio recorder for VueJS applications
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!
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.
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.
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.
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.
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.
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.
A notification component that asks for consent for the usage of cookies
Keynote (vue-keynote) is a presentation library which enables you to declaratively create your slides using Vue.
A new major version of vue-rx is here! Most important changes – introducing support for RxJS 6.0 and dropping support RxJS 4.0.
We exist to provide Vue developers with the latest news and tutorials to stay up-to-date with their technology.