← Go back

91Tuesday, April 24, 2018
🎉 Vue Loader v15 released! 3 new videos from VueConf US and more!

Hey!

🎉 I’m happy to announce that the Vue Loader v15.0 has just been released! Check out the updated docs!

Keep in mind that the new release comes with several breaking changes, so if you’re on a project bootstrapped with the vue-cli 2.x, you should probably not update to the new version if you’re not ready to migrate your webpack config. Of course, the documentation includes a migration guide.

As promised, here are the 3 new recordings from the recent VueConf US conference.

— Damian Dulisz


Stories

Vue Loader v15.0 is here! – Migrating guide

🔥 The vue-loader v15 has been released! 🔥 You can already read the updated documentation as well as the migration guide. Do you like how the new documentation feels like? It’s using VuePress.

Three more VueConf US Videos

Three more VueConf US talks were released late last week. Sarah Drasner speaks on Serverless Functions and Vue, John Lindquist speaks on vue-rx, and Jen Looper’s speaks on Creating an engaging Native Mobile app with Vue and NativeScript.

VuePress vs Nuxt.js

How is VuePress different from Nuxt? What can I do with VuePress that I can’t do with Nuxt? Vue Mastery covers the biggest differences between the two and the main benefits for using VuePress.

Native-Like Animations for Page Transitions on the Web

Now, this is an absolute must-read when it comes to creating animated page transitions with Vue.js. In this article, Sarah Drasner explains the concepts behind more complicated user interface transformations which in the end might lead you to build something like this https://page-transitions.com/.

How to build your own vue-cli 3 plugin

Thanks to the plugin-based architecture of Vue-cli 3.x, the command line tools can also be used for ongoing work on the project. From this relatively simple tutorial, you will learn how to create your own Vue-cli 3.x plugin.

SVG and Vue.js — A 2 Minute Love Story

Since SVG files follow the same document structure rules as HTML, those can be parsed by the Vue template compiler. In other words – you can set reactive properties on SVG attributes the same way you do it with HTML attributes. And this short article explains how to create components that use an SVG file as the component template.

Integrating Websockets into a Real-Time Vue App with Socket.io and Vuex

Both Vuex and Websockets are things that tend to be slightly more complicated than they seem at first. It might get even harder if you have to connect them in one application. Thankfully, Josh has written a 4-part series about integrating Websockets into a real-time Vue.js application that uses Vuex. Read on!

Making responsive Vue components with ResizeObserver

Here’s a really interesting take on responsive components in environments where you can’t rely on CSS media queries. To solve the problem Anton has created a wrapper around ResizeObserver that you can now use in your app.

Add Loading Indicators to Your Vue.js Application

There are several ways to manage loading indicators to your users and Samual covers most of them in this article. This includes building indicators for you page transitions, ajax requests, asynchronous components as well as a reusable HOC.

Handling Errors in Vue with Error Boundaries

Error boundaries are one of the most underrated features introduced in Vue v2.5. It allows you to easily handle errors, without having to rely on try/catch. This is especially useful for errors that might happen in your render function. In this article, Dillon Chanis explains how to build an error-boundary component and gives some more insight on how to use the feature and what are the limitations.

Build a Mini Netflix Clone with Vue

Here’s a step-by-step guide in form of a GitBook on how to build a mini Netflix clone using Vue.js.

5 Awesome Boilerplates/Templates For Vue.js Projects

Many people have mixed feelings about boilerplates/templates and that’s quite understandable. However, if you pick the boilerplate based on your project needs it might be a huge help. Here, Anthony Gore presents 5 well-established project templates for different use cases like PWA, creating documentation or building a GraphQL project.

Vue File Upload Using vue-dropzone Tutorial

A pretty simple tutorial on how to upload files using vue-dropzone, a Vue.js wrapper component around Dropzone.js.

Vue Firebase CRUD Example

Another tutorial by Krunal, this time about building a simple CRUD application using Vue.js and Firebase.


Libraries

GitHub - Vanilla-IceCream/vuex-bound

https://github.com/Vanilla-IceCream/vuex-bound

Vue two-way binding (v-model) for Vuex state and mutations.

GitHub - davestewart/vuex-pathify

https://github.com/davestewart/vuex-pathify

Vue / Vuex plugin providing a unified path syntax to Vuex stores

GitHub - robsontenorio/vue-api-query

https://github.com/robsontenorio/vue-api-query

💎 Elegant and simple way to build requests for REST API

GitHub - zmts/vuejs-boilerplate

https://github.com/zmts/vuejs-boilerplate

❤️ Real world base Vue.js app(access/refresh tokens auth, api services, http client, store modules)

GitHub - lusaxweb/vuenut

https://github.com/lusaxweb/vuenut

⚙️ Developer tools for Vue.js (Vuex)