Your Choice JavaScript News

Vue News Tuesday, February 13

Vue News TLDR / Table of Contents

  • Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)
    • At Rever (www.reverscore.com) we just released a new version of our web client using Vue.js. 641 commits and 16 weeks of intense development after with two resources, here we are, very proud of a…
    • Angular, Vue.js, React, Angular team, decision
  • The Ultimate Vue.js & Laravel CRUD Tutorial
    • I’ll show you how to set up a full-stack VueJS/Laravel app and demo each of the CRUD operations. We’ll use Axios for AJAX, and I’ll also show you strategies for dealing with the tricky UX of this architecture.
    • CRUD operations, Vue/Laravel CRUD app, default Laravel frontend, demo full-stack app, new Crud data
  • Generate a quick AWS dashboard using LINQPad
    • Tips on how to use LINQPad to generate a quick AWS Dashboard
    • instances, LINQPad, low tech, SQL Server Express, low tech solution
  • Creating a Vue.js Serverless Checkout Form: Setup and Testing
    • There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we’ll go over how to set up a serverless function,…
    • serverless function, Serverless Function app, serverless concepts, API section, free trial
  • Replacing jQuery With Vue.js: No Build Step Necessary
    • Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so….
    • Vue, Sarah Drasner, jQuery, ,
  • Enso: SPA Built with Bulma, Vue.js and Laravel
    • SPA built with Bulma, Vue and Laravel loaded with lots of features like: json template generated datatables and forms, menu-role-permission management, comments / documents / contacts / addresses…
    • Laravel SPA project, User action logger, Application interface tutorials, file management library, simple code snippet
  • Code Notes: Code Snippet Manager powered by Electron & Vue.js
    • A simple code snippet manager for developers built with Electron & Vue.js
    • Code Notes, latest Vue.js news, Vue conference, Vue Components, Vue community
  • Auto Virtual Scroll List For Vue.js 2
    • Auto Virtual Scroll List For Vue.js 2 in Laravel, Laravel & VueJs, VueJs
    • High level Vue.js, item height, later calculations, correct value, virtual list
    • Official Vue.js Conference USA
    • historic New Orleans, Lightning talks, best presentations, Workshop details, favorite Vue.js
  • My conclusion about Angular 2 was simple, the only thing Angular 1 and 2 share in common is the name, they are completely different frameworks.So consider that we had 17 versions to upgrade on a non-tested system, a lot of pressure from the business to write new features, lots of…
  • I got a good understanding of the basic concepts of Vue.js, defined a good and extendable architecture but most importantly I really enjoyed the experience of writing code with it and I felt I was doing it faster than with React.React was a lot harder than I thought, choosing between…
  • React took the most mentions and Angular 2 came in a distant second place.I started to look for local talent with Vue.js experience and I did find some who were really good so I started to think that I was not alone, my social techy circle was probably too small…
  • Twitter is another good example, they released Bootstrap under the very permissive MIT License and no one is talking about License problems with Bootstrap.Final wordsOut of the many web pages I researched before making a decision, one graph caught my attention, the developer satisfaction on The state of Javascript survey…
  • You can read The State of Javascript on the following link.Overall, Vue.js was the the winner in our evaluation, it had many questions answered on Stack Overflow, the clearest official documentation of the three options, the smallest code base, integrates well with Bootstrap and learning that it was backed by…

Tags: Angular, Vue.js, React, Angular team, decision

  • In this tutorial, Ill show you how to set up a full-stack Vue & Laravel app and demo each of the CRUD operations.
  • This method is responsible for retrieving our Cruds from the backend and will target the action of our Laravel controller, thus using the GET endpoint /api/cruds.
  • In the case of the method, we could update the Crud object in the frontend app instantly before the AJAX call is made, since we already know the new state.
  • Now that you understand the key points of the architecture, you will be able to understand these last two operations without my commentary: – – As you know, our CRUD operations are asynchronous, and so theres a small delay while we wait for the AJAX call to reach the server,…
  • As you can see from the inline style, when the class is added to , it will completely cover the app, adding a greyish tinge and preventing any click events from reaching the buttons and selects: – – The last piece of the puzzle is to toggle the class by…

Tags: CRUD operations, Vue/Laravel CRUD app, default Laravel frontend, demo full-stack app, new Crud data

  • It also happens that SQL Server Express more than suffices for such installations which is free (with restrictions) – – This coupled with a small tool we’ve built, to turn on and off instances, actually has resulted in a win-win situation for both our clients and us.
  • We have instances across regions, so let’s use a list to keep track of the regions we’re interested in: – – For each of these regions, let’s create an AWS client – – For the and , the recommended practice is to create a user specifically for this purpose from…
  • This function truly deserves a section for itself and in my opinion, is what makes LINQPad such a compelling tool to work with.
  • is a function that is available on every object within you LINQPad queries.
  • This should give us a nicely formatted region wise list of instances and their status.

Tags: instances, LINQPad, low tech, SQL Server Express, low tech solution

  • In this four-part tutorial, well go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application.
  • First, well head over to the portal, (or if you don’t already have an account, you can sign up for a free trial here) and select New > Serverless Function – – When we click on the Serverless Function app, well be taken to a panel that asks for details…
  • As you can see in the screenshot above, it will autofill most of the fields just from the app name, but let’s go over some of these options quickly: – – This will bring you back to the main portal dashboard and let you know that your function is deploying….
  • If you’d like to play around with a serverless function and see it in action for yourself, you can create one with a free trial account.
  • Now that we have the base of our serverless function, let’s set up what we’ll need to communicate with Stripe!

Tags: serverless function, Serverless Function app, serverless concepts, API section, free trial

  • To capture information as a user types, heres how we would do this in jQuery and Vue side by side: – – See the Pen jQuery capture information from a form input by Sarah Drasner (@sdras) on CodePen.
  • See the Pen Vue capture information from a form input by Sarah Drasner (@sdras) on CodePen.
  • We can see this in the updated version of the last example, where the information is gathered on an enter keypress: – – See the Pen jQuery capture information from a form input- on enter by Sarah Drasner (@sdras) on CodePen.
  • See the Pen Vue capture information from a form input, enter key by Sarah Drasner (@sdras) on CodePen.
  • Below is an example of coordinating showing something based on the presence of user input: – – See the Pen Show button based on content Vue by Sarah Drasner (@sdras) on CodePen.

Tags: Vue, Sarah Drasner, jQuery, ,

  • Enso is a starting project, based on Laravel 5.5, Vue 2, Bulma, and integrated themes from Bulmaswatch, utilizing Vueex and VueRouter.
  • The documentation to support all these is available here.
  • It is very detailed providing info for every bit, how everything works, usage options, configuration and more.
  • There is a list explaining what is used for authentication purposes, the option between stateful & stateless, about session management, security and more that can explain to the user how it works under the hood.
  • This project is available on GitHub under the MIT licence.

Tags: Laravel SPA project, User action logger, Application interface tutorials, file management library, simple code snippet

  • Code Notes is a project that can help with efficiency by offering a great tool: a notepad for codes.
  • The purpose of the application is to improve the productivity of developers with a local (for the moment) code snippet manager to collect, insert and reuse your snippets.
  • This project was generated with electron-vue@1c165f7 using vue-cli.

Tags: Code Notes, latest Vue.js news, Vue conference, Vue Components, Vue community

  • x component for virtual list where each item height is not known before render.
  • The number of rendered components is calculated by accumulating each item height to see how many fit intotalHeight.
  • Each item height is assumed to bedefaultHeight, until it is actually rendered.

Tags: High level Vue.js, item height, later calculations, correct value, virtual list

    Tags: historic New Orleans, Lightning talks, best presentations, Workshop details, favorite Vue.js

    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.