background preloader

Vue.js

Facebook Twitter

Vue.js 2 Component Framework. A Comparison of Vue.js Frontend Frameworks. With the surge of popularity of Vue.js over the past year, a multitude of Vue-specific front end frameworks have appeared on the scene.

A Comparison of Vue.js Frontend Frameworks

Having options is great for the developer. But it can also be overwhelming when choosing between them. This is an effort to compare the various options available, in an unbiased and approachable manner, while highlighting the strengths of each one so the developer can make an informed decision. In this article I will give some facts and thoughts about each framework, and show a comparison table. In part 2 I will show a code sample from each framework to give the reader an idea of how they actually operate. Element is a "Vue 2.0 based component library for developers, designers and product managers, with a set of design resources. " Its documentation is example based and very thorough. While Element provides its own grid framework, it does not appear to be responsive, instead focusing on desktop applications. Keen UI v1.0 for Vue 2 released - Vue.js Feed.

Keen-UI A lightweight collection of essential UI components written with Vue and inspired by Material Design.

Keen UI v1.0 for Vue 2 released - Vue.js Feed

Use it to add UI elements without much trouble into your project. Installation NPM (recommended) Introduction — Vue.js. What is Vue.js?

Introduction — Vue.js

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks. Intro to Vue.js: Rendering, Directives, and Events. If I was going to sum up my experiences with Vue in a sentence, I'd probably say something like "it's just so reasonable" or "It gives me the tools I want when I want them, and never gets in my way".

Intro to Vue.js: Rendering, Directives, and Events

Again and again, when learning Vue, I smiled to myself. It just made sense, elegantly. This is my own introductory take on Vue. It's the article I wish I had when I was first learning Vue. If you'd like a more non-partisan approach, please visit Vue's very well thought out and easy to follow Guide. Article Series: Rendering, Directives, and Events (You are here!) One of my favorite things about Vue is that it takes all of the successful things from other frameworks, and incorporates them without getting disorganized. Some benefits I've enjoyed over Vue's competitors: cleaner, more semantic API offerings, slightly better performance than React, no use of polyfills like Polymer, and an isolated, less opinionated view than Angular, which is an MVC.

Upload files via Droply Dropzone wrapper for Vue.js 2 - Vue.js Feed. Droply Upload files by dropping or selecting them to the upload box, using the Droply component, a Dropzone wrapper for Vue 2.

Upload files via Droply Dropzone wrapper for Vue.js 2 - Vue.js Feed

Installation This is a recommended way of installation. You can use either npm or yarn package manager: $ yarn add droply --dev Usage. Intro to Vue.js: Five part series on Vue.js - Vue.js Feed. Intro to Vue.js Series on CSS-Tricks Sarah Drasner has written a five-part tutorial series, Intro to Vue.js, to share knowledge and experience: If I was going, to sum up my experiences with Vue in a sentence, I’d probably say something like “it’s just so reasonable” or “It gives me the tools I want when I want them, and never gets in my way”.

Intro to Vue.js: Five part series on Vue.js - Vue.js Feed

GitHub - littlewin-wang/vue-images: A simple lightbox component for displaying an array of images. Vue-images. Examples Photos courtesy of Unsplash.

vue-images

Support your keyboard to navigate left right esc. Support mouse scroll to navigate. Support mouse touch move to navigate. Also, try resizing your browser window. Getting Started 1. Vue-fullstack. This project's target is to helper people to create a Reactivity, Realtime, User friendly backend system This project's goal is to help people create a reactive, realtime and user friendly backend system.

vue-fullstack

Requirement Mongodb This project requires mongodb as the database. Vodal: Vue.js modals with animations - Vue.js Feed. Vodal modals Vodal is providing modals for your apps with many animation styles.

Vodal: Vue.js modals with animations - Vue.js Feed

It is based on a React project, with similar functionality though easier implementation. Installation. Vodal. Vue password: realistic password strength estimator - Vue.js Feed. Vue-password-strength-meter Interactive password strength meter based on zxcvbn for Vue.js.

Vue password: realistic password strength estimator - Vue.js Feed

Import it in your project as a Vue component, and use props to customize it. Install. [2017] Vue.js in less than 30 minutes for beginners - Tutorial - 2.0. Vue Comps v0.1.0.   Google Developers. Web Push Notifications, a new way to engage users Web push notifications makes it easy to re-engage with users by showing relevant, timely, and contextual notifications to the user, even when the browser is closed! Web push notifications allow users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content.

The Push API and Notification API open a whole new set of possibilities for you to re-engage with your users. Get started Latest updates for Web Developers Ways to enhance your site (AKA the Hot Stuff) Documentation for Responsive Email Patterns - MJML. MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices. Overview MJML rolls up all of what Mailjet has learned about HTML email design over the past few years and abstracts the whole layer of complexity related to responsive email design. Get your speed and productivity boosted with MJML’s semantic syntax. MJML has been designed with responsiveness in mind.

MJML App. Front-end Tools: My Favorite Finds of 2016. Another year has passed and, as we all expected, the Web Platform is continuing to explode with innovation, irritation, fatigue, and a huge influx of new tools and technologies that promise to make our lives as developers easier. As usual, we’ve seen updates to popular tools like React and Angular, while new tools like Vue.js have come on the scene and quickly scooped up a large amount of interest. As many of you know, because I curate a weekly newsletter that focuses on tools, I come across a preposterous amount of things in my research. Naturally, I give some attention to the popular stuff. But I also appreciate some of the lesser-noticed things that are both interesting and practical. So, just like I did last year, in this article I’ll describe some of my favorite finds of the year in the area of tools for front-end developers. Modaal It’s not difficult to find a modal window plugin, but it’s rare to find one that checks almost all the boxes in terms of functionality and features.

Pricing - Stormpath User Identity API. Vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications. Vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects. Getting up and Running with the Vue.js 2.0 Framework. This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the Web community Back in September, the popular JavaScript framework Vue.js released v2 and ever since I’ve been really eager to give it a spin and see what it’s like to work with. As someone who’s pretty familiar with Angular and React, I was looking forward to seeing the similarities and differences between them and Vue.

Vue.js 2.0 sports excellent performance stats, a relatively small payload (the bundled runtime version of Vue weighs in at 16kb once minified and gzipped), along with updates to companion libraries like vue-router and vuex, the state management library for Vue. There’s far too much to cover in just one article, but keep an eye out for a later article where we’ll look more closely at some of the libraries that couple nicely with the core framework. Inspiration from Other Libraries Components, Components, Components <! Markdown Editor - vue.js. GitHub - vuejs/awesome-vue: A curated list of awesome things related to Vue.js. Vue Comps v0.1.0. GitHub - vuejs/vue: A progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Introduction - vue.js. Vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects. Weex. 50: Evan You - What's Coming in Vue.js 2.0.

_lernen

Book. Ajax. Vuejs feed. Vuedo. Vue.js Resources Archive - Vue.js Feed. Peeking into Vue.js 2. Peeking into Vue.js 2. The warning we get now when we try to change the quantity, is: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “gems” (found in component: <cart>) That is because, in Vue 2, mutating a prop locally is considered an anti-pattern. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten. In object-oriented and functional programming, an immutable object is an object whose state cannot be modified after it is created. So, instead of updating the ‘quantity ’ prop and syncing it with parent’s, we will make our component submit an event to the parent.

Since ‘vm. Because Vue instances implement the event emitter interface, we can actually use an empty Vue instance as our event emitter. Evan is creating Vue.js. Vue 2.0 is Here! – The Vue Point – Medium. What’s New in 2.0 Performance The rendering layer has been rewritten using a light-weight Virtual DOM implementation forked from snabbdom. On top of that, Vue’s template compiler is able to apply some smart optimizations during compilation, such as analyzing and hoisting static sub trees to avoid unnecessary diffing on re-render.

The new rendering layer provides significant performance improvements compared to v1, and makes Vue 2.0 one of the fastest frameworks out there.

Cheatsheet

GitHub - vuejs/vue-animated-list: A Vue.js plugin for easily animating `v-for` rendered lists. GitHub - vuejs/laravel-elixir-vue-2: Laravel Elixir Vue 2.0 support plugin. Vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. GitHub - vuejs-templates/webpack: A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. Vue.js devtools. Vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications.

Getting Started - vue.js. Sponsored By. Vue.js. Global Config. Vuejs. Getting Started With Vue.js. Short Order Vue: A Vue 2.0 App. On Wednesday I shared some of the resources I’ve been using to move from previous releases of Vue to the new Vue 2.0 API. (BTW: I’ve got a few more links to add, thanks to some great folks on Twitter.) The biggest changes in 2.0 aren’t really in the API itself, but there are a few tricky bits here and there. As I’ve proceeded, I’ve found it is a little easier to just start some mini projects from scratch to test out some of the new functionality, as opposed to trying to reason about how to rewrite old code. In fact, when you work with Vuex, some of the new ways of working either completely eliminate the need for some old code, or reduce the footprint rather dramatically.

Anyway, I put together a little app to make use of some of the new functionality, and to show off a couple patterns that answer a few of common questions I’ve seen around the web (many of which are release agnostic, as they’ve been around since 0.8, or earlier). If you want the code, it’s on GitHub. The App. GitHub - madskristensen/VuePack. Vue.js Pens - a Collection by Christophor Wilson on CodePen. Vue.js CRUD application. Exploring Vue.js - Why choose Vue.js for your next app. - Vue.js Feed. 00 of 04 - Building a map dragger using Vue.js 2.0 + Vuex - Introduction. Laravel JWT Auth with Vue.js – JimFrenette.com. Vue.js todo list. Single-page Forum App: Frontend. GitHub - BosNaufal/vue-simple-pwa: Simple Progressive Web App Built with Vue Js. Vue Simple PWA. Countdown Timer using Vue.js - Vue.js Feed. Guide: How to use Vue.js with jQuery Plugins – Christian Gambardella.

Working with Vue can be awesome. But you might know that it can also give you headaches, when you try to combine it with jQuery plugins or other libraries. Quasar Framework. Vue.js. Learning Vue 1.0: Step By Step. The Vue Instance - vue.js. Constructor.