Your Choice JavaScript News

Vue News Saturday, February 10

Vue News TLDR / Table of Contents

  • Learn How to Write a Vue JS Wrapper Component
    • A Vue “wrapper” component is a technique used to integrate a 3rd party plugin with Vue by wrapping it in a custom Vue component. The wrapper technique means that you are likely bringing in a library like jQuery and a jQuery plugin. This combination seems to be the most ubiquitous,…
    • component, date range, date range picker, moment, wrapper component
  • React or Vue: Which Javascript UI Library Should You Be Using?
    • In 2016 React cemented its position as king of the Javascript web frameworks. This year saw rapid growth of both its web and native mobile libraries, and a comfortable lead over main rival Angular…
    • Vue, React, simple Vue app, unashamed Vue fan-boy, React Native
  • Single Page Apps with Vue.js and Flask: Setting up Vue.js
    • This is the opening post to a tutorial series on using Vue.js and Flask for full stack web development. In this series I am going to demonstrate how to build a survey web app where the application architecture consists of a front-end comprised of a Vue.js Single Page Application (SPA)…
    • id, text, v-for directive, Vue.js SPA application, component
  • Supercharge your Ruby on Rails app with ActionCables and Vue.js!
    • How to use Rails ActionCables with Vue.js and deploy it into production. A guide and example code to kickstart your journey with reactive programming.
    • Rails application, reactive programming, Daniël van Gils, digital native customers, asynchronous programming paradigm
  • Introduction To Server Rendered Vue.js Apps With Nuxt
    • The Vue.js framework is one of the top trending framework for web developers this year. Vue.js makes it easy to get started and enables you to build all types of single-page web applications. The…
    • Nuxt, static HTML files, development web server, application, following result
  • YouTube
    • Peguei um formulário com CSS no Codepen.io e fiz a implementação do comportamento com Vue.js e Vuelidate. Código fonte final https://github.com/vedovelli/scr…
    • Duration, ngAtlanta, views, Angular vs React.js, Smart Angular Elements

Score: 588.260164826621
URL: https://laravel-news.com/vue-wrapper-component
Tweeted At: Sat Feb 10 11:50:01 +0000 2018
Publish Date: 2017-11-14T09:00:06+00:00
Author: Paul Redmond

  • Let’s quickly cover an example of how we might build a wrapper component with a date range picker, which allows you to pick a start and an end date.
  • For our example, we’ll use the Date Range Picker, which is a Bootstrap component that relies on jQuery and Moment.js.
  • If we want to make our component react to changes made by the date range picker plugin, we need to hook up a jQuery event to respond to changes: – – You can see that we’ve added a bunch of code to the component, but first look at the updated…
  • In the parent, we can listen to that event by defining an event attribute: – – A simple event handler example might look like the following: – – Let’s add some more options to the wrapper component to expose more functionality from the underlying date range plugin.
  • The official Vue documentation has a Wrapper Component Example, which demonstrates using the popular Select2 jQuery plugin in a wrapper Vue component with to bind a custom wrapper component.

Tags: component, date range, date range picker, moment, wrapper component

Score: 361.8683527320968
URL: https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d
Tweeted At: Sat Feb 10 16:09:00 +0000 2018
Publish Date: 2016-12-22T04:42:16.408000+00:00
Author: Anthony Gore

  • So I put the idea to him that we sit down one day with our laptops and show each other what our chosen library had to offer.Anthony (left) and Alexis (right) comparing React and Vue at Bull and Bear Cafe in Chiang Mai, ThailandAfter a lot of discussion and learning from…
  • These cases can be worked around with a React-like set method from the Vue API.If you need your application to be as small and fast as possible, go with Vue.Both React and Vue will build a virtual DOM and synchronise the real DOM when the app’s state changes.
  • To be fair you will get a larger API with React, but you don’t get double as much functionality.If you plan to build a large scale app, go with React.A comparison of a simple app implemented in both Vue and React, like the one at the beginning of this article, may…
  • But React’s rendering system is more configurable and has features like shallow rendering that, combined with React’s testing utilities, allow for far more testable and maintainable code.Meanwhile, React’s immutable application data may not be as succinct, but it shines in larger application when transparency and testability become critical.If you want…
  • However, the timeline and specifics of this integration are still unclear.Since Vue has HTML templates as a core part of its design and does not have custom rendering as a current feature, it’s hard to see that a native counterpart for Vue.js in its current form will be as tight…

Tags: Vue, React, simple Vue app, unashamed Vue fan-boy, React Native

Score: 49.74575806451612
URL: http://stackabuse.com/single-page-apps-with-vue-js-and-flask-setting-up-vue-js/
Tweeted At: Thu Feb 08 15:30:15 +0000 2018
Publish Date: 2018-02-08T14:35:00+00:00
Author: Adam Mcquistan

  • In this series I am going to demonstrate how to build a survey web app where the application architecture consists of a front-end comprised of a Vue.js Single Page Application (SPA) and a backend REST API using the Flask web framework.
  • Vue components have a specific structure containing a section for component-specific HTML, a section to define the object and that component’s behaviors implemented in JavaScript, and a section for CSS / SCSS rules.
  • Back in the terminal in the same directory as the package.json file install and save bulma to the project with the following command: – – In addition, I will need to install some dev tools to properly load the styles for the application so the components know how to work…
  • These two surveys map to the array of survey objects that were in my data function of my component, which I fed into my HTML using the v-for directive.
  • Given an object such as , iterating with a v-for directive would look like this: – – I have my first functional UI component displaying a collection of surveys, but in the end the actual application will need to fetch survey data from our REST API.

Tags: id, text, v-for directive, Vue.js SPA application, component

Score: 14.05892959247953
URL: http://blog.cloud66.com/supercharge-rails-with-vuejs-and-actioncables/
Tweeted At: Wed Feb 07 03:09:02 +0000 2018
Publish Date: 2017-12-19T08:31:00+00:00
Author:

  • Your web application should reflect changes and interactions in (near) real-time without page loads or other lagging stuff causing to break the flow of the customer.
  • The WebSocket protocol enables interaction between a browser and a web server with lower overheads, facilitating real-time data transfer from and to the server.
  • We subscribe to our GossipChannel ActionCable backend and we implemented a method which can be called from Vue.js to send a message.
  • The second half of this code is a simple Vue.js model with two methods to add a message ( ) to the data model and send a message ( ) to ActionCable.
  • The frontend is a simple HTML form with Vue.js tags ( ) to get the data rendered and provide two inputs to change the name of the Gossiper and the functionality to send a message on the keydown event ( ).

Tags: Rails application, reactive programming, Daniël van Gils, digital native customers, asynchronous programming paradigm

Score: 12.914881699661999
URL: https://medium.com/codingthesmartway-com-blog/introduction-to-server-rendered-vue-js-apps-with-nuxt-91dbfd80795a
Tweeted At: Sat Feb 10 09:45:05 +0000 2018
Publish Date: 2017-06-10T18:46:34.856000+00:00
Author: Sebastian Eschweiler

  • Instead Nuxt offers server rendering or static file rendering to boost the performance of your web application.
  • Store Directory: If you would like to use Vuex in your Nuxt application this is the directory where you should put your store files in.ConfigurationIn addition to the project structure described above you’ll find two configuration files in the project folder which are both essential to for your application: nuxt.config.js…
  • Let’s say that we want to make available the following two routes in our application:To do so let’s create a new subfolder home inside the pages folder and add two new files:Next, let’s insert the following code in index.vue:template h1This is /home/h1/templatescriptexport default {}/scriptand the following code in about.vue:template h1This…
  • In this case the Nuxt framework is operating in server rendered mode automatically which means that all views (pages) of your application are pre-rendered on server-side and delivered as HTML files to the client.
  • For further on this topic take a look at https://nuxtjs.org/api/nuxt or try out the ExpressJS + Nuxt starter template which is available at Generated DeploymentAnother great option of Nuxt is that is can generate static HTML files for your application by using the following command:  $ npm run generate  The output can…

Tags: Nuxt, static HTML files, development web server, application, following result

Score: 142.05569648924123
URL: https://www.youtube.com/watch?t=2873s&v=n8eW8D04tNc
Tweeted At: Thu Feb 08 16:53:25 +0000 2018
Publish Date:
Author:

    Tags: Duration, ngAtlanta, views, Angular vs React.js, Smart Angular Elements

    Top Vue Courses

    Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

    By Bo Andersen
    • How to build advanced Vue.js applications
    • How to build single page applications (SPA)
    • Understand the theory and how Vue works under the hood
    • How to manage state in large applications with Vuex
    • Communicating with servers with HTTP
    • Use modern tools for developing and building applications (e.g. webpack)

    Learn more.


    Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

    By Maximilian Schwarzmüller
    • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
    • Understand the Theory behind Vue.js and use it in Real Projects
    • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

    Learn more.


    The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

    By Anthony Gore
    • Understand all Vue concepts from beginner to advanced
    • Build three real world applications using Vue.js utilising every Vue feature
    • Use the Vuex statement management library
    • Write basic Vue with ES5 and also modern Vue with ES6
    • Setup VueJS environment with development tools including Webpack
    • Create a universal application with server-side rendering
    • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
    • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

    Learn more.


    Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

    By David Katz
    • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
    • Develop apps that deal with APIs and web requests.
    • Create web apps with a full authentication service, and real-time database.

    Learn more.


    Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

    By Dejan Stošić
    • Build your own VueJS application of any size
    • Plan and structure your project
    • Write maintainable code
    • Use smart development tools like vue-cli

    Learn more.