Your Choice JavaScript News

Vue News Monday, February 19

Vue News TLDR / Table of Contents

  • Server-Side Rendering With Laravel & Vue.js 2.5 | Codementor
    • The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP. In this article, I’ll go through the steps of setting up a Vue server-rendered app using Laravel and V8Js.
    • app, server-side rendering, Vue.js app, Vue SSR, full-stack app
  • 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
  • Building a Text-Based Adventure in Vue.js
    • Note – I found a bug with the room description that was fixed in a later build. Sorry about that! Happy Valentines Day! Today I’m showing my love for Vue.js by building something totally impractical and fun – a text-based adventure in Vue.js. As a child of 80s, I grew…
    • room, input, room description, view layer, simple text-based game
  • Vue.js Top 10 Articles for the Past Month (v.Feb 2018)
    • For the past month, we ranked nearly 1,000 Vue.js articles to pick the Top 10 stories that can help advance your career (1% chance).
    • Vue JS, Vue JS CLI, folder-based config approach, Command Line Instrument, best daily articles
  • 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, ,
  • express-vue/express-vue
    • express-vue – Vue rendering engine for Express.js. Use .Vue files as templates using streams
    • Google Chrome, init method, latest Safari, Reload, tab
  • If you aren’t familiar with server-side rendering (SSR), here’s a simple example: say we have an Vue.js app built with components.
  • If we use the browser dev tools to view the page DOM after the page has loaded, we will see our fully rendered app: – – But if we view the source of the document i.e. index.html as it was when sent by the server, you’ll see it just has…
  • Obviously, SSR requires a JavaScript environment on the server, as a Vue app is made with JavaScript.
  • js backends like PHP, Ruby and Python, a JavaScript sandbox must be spawned from the server to run the Vue app and generate an output.
  • To begin with, we’ll create a method that will return our app view: – – We’ll add a web route for the root path which calls this controller method: – – With that done, we should now be able to view our humble full-stack app: – – The Vue.js app…

Tags: app, server-side rendering, Vue.js app, Vue SSR, full-stack app

  • 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

  • Infocom games were notorious for their complex parsers and their ability to take input and map it to a proper action in the game.
  • So given that a room has exits to the west and east, I’d support the user typing commands to move in those directions.
  • Right now this is a JSON file, but in the next version, I’m going to support the abilty to use individual files for rooms and use a Node script to handle converting that data into JSON.
  • The game’s view layer is split into two states – one to use while stuff is loading (you could imagine the room data becoming quite large) and one to display the main game UI.
  • Right now that supports two elements – a room description with exit data dynamically generated and then a CLI that’s really just an input field.

Tags: room, input, room description, view layer, simple text-based game

  • Vue.js Top 10 Articles for the Past Month (v.Feb2018)For the past month, we ranked nearly 1,000 Vue.js articles to pick the Top 10 stories that can help advance your career (1% chance).
  • Vue.js gained the most number of Github stars among front-end frameworks in2017.
  • (Source)Topics in this list: Devtools, Cheatsheet, Building Website, QA, Checkout Component, Web Accessibility, Hakernews Clone, 2017 ReviewJavaScript, Node, React are published separately in the publication.Vue.js Open Source Projects of the Year v.2018: HereWatch Vue.js Monthly Top 10 on Github and get email once a month.As an article ranking service for…
  • This is a competitive list and youll find the experience and techniques shared by the Vue.js leaders useful.Course of the month:A) Nuxt.js: Vue.js on Steroids.
  • [1,559 recommends, 4.8/5 stars]B) Beginner: Master VueJS, Command Line Instrument, Babel, NPM, Webpack, Vue JS CLI, single-file components, Vue Router, and VueX.

Tags: Vue JS, Vue JS CLI, folder-based config approach, Command Line Instrument, best daily articles

  • 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, ,

    Tags: Google Chrome, init method, latest Safari, Reload, tab

    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.