← Go back

83Tuesday, February 27, 2018
Sarah Drasner's Conference Talk, Roman Kuba, Higher Order Components, Creating Reusable Transitions, Custom Routes with Nuxt.js, Google reCaptcha, Dynamic and Async Components, Building Face Recognition App, and Google Places Auto Complete

🔥 Two Vue.js Amsterdam/Frontend Love videos are here! 🔥

Make sure to check out the talks by Sarah Drasner “Animating Vue How capable and elegant is Vue js in terms of animation” and Roman Kuba “Scaling Vue in an existing stack”.

Ever since I saw Higher-Order Components I wanted to use them (mostly because of the aesthetics of composition), until I learned that they don’t really solve anything you can’t solve with mixins and both solutions come with similar cons. If you’re still wondering about this topic, I would suggest to watch (https://www.youtube.com/watch?v=BcVAq3YFiuc) awesome talk about render props, which is basically how scoped slots work in Vue.


Stories

Sarah Drasner - Animating Vue How capable and elegant is Vue js in terms of animation

Sarah Drasner - In this incredible talk, Sarah Drasner (developer advocate at Microsoft) speaks on: Animating Vue How capable and elegant is Vue js in terms of animation.

Find her slides here --> Drasner Slides - Animating in Vue.js

Roman Kuba - Scaling Vue in an existing stack Vuejs Amsterdam

Roman Kuba - Scaling Vue in an existing stack Vuejs Amsterdam (16th February 2018)

View his slides here --> Kuba Slides - Scaling Vue

Higher Order Components in Vue.js

Did you know a Higher Order Component can help you share logic between your other components? Learn more in this article.

Creating Reusable Transitions in Vue

An elegant guide for encapsulating reusable transition effects. This tutorial includes preparing adjustable duration and built-in support for transition groups.

Custom routes with Nuxt.js

Working with routes and configuration generated by Nuxt.js, localised paths and Nuxt modules - it’s all here.

How to use Google reCaptcha with Vuejs

A simple tutorial describing how to use reCaptcha with your user signup form to ensure users aren’t bots.

Dynamic and Async Components made easy

Learn how to load components asynchronously so you’re only loading code for sections of the app that are actually displayed.

Building a Simple Face Recognition App with Vue.js and Kairos

Learn how to use Kairos to build a simple face-recognition app with Vue.js.

Google Places Autocomplete in Vue.js

Henrik Fogelberg show’s that integrating Google Places with Vue is so simple that no npm packages are required.


Libraries

Vuesax

https://lusaxweb.github.io/vuesax/

Vuesax is a component library based on Vue js 2.0

GitHub - dotboris/vuejs-serverside-template-xss

https://github.com/dotboris/vuejs-serverside-template-xss

Demo of a Vue.js app that mixes both clientside templates and serverside templates leading to an XSS vulnerability.

GitHub - chrisvfritz/vue-enterprise-boilerplate

https://github.com/chrisvfritz/vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.

GitHub - DominikSerafin/vuebar

https://github.com/DominikSerafin/vuebar

Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies.

GitHub - express-vue/express-vue

https://github.com/express-vue/express-vue

Vue rendering engine for Express.js. Use .Vue files as templates using streams

GitHub - studbits/vue-prosemirror-editor

https://github.com/studbits/vue-prosemirror-editor

📝 Minimal Prosemirror Wrapper for Vue.js, to create a rich, collaborative editor.

Progressive Weather App

https://jimmerioles.github.io/progressive-weather-app/

© Jim Merioles 2018 - A freeCodeCamp Project (make sure to allow location)