Your Choice JavaScript News

Vue Jargon, AJAX & Social News Thursday, December 7

Vue News TLDR / Table of Contents

  • Jargon-Free Webpack Intro For VueJS Users
    • Webpack promises great things for Vue developers. But the range of possibilities of Webpack are also why it’s so intimidating to learn. In this article, I’ll give you a gentle introduction to Webpack without the jargon that may have you bewildered.
    • example project, Webpack, ES modules, dependency management problem, HTML document
  • 4 AJAX Patterns For Vue.js Apps
    • Vue.js is a UI framework, but you often need to display data from the server. What is the best way to implement AJAX in Vue? In this article I cover four different approaches, each with their own pros and cons.
    • AJAX, AJAX logic, root instance, AJAX requests, data
  • Vue.js component for social share.
    • vue-goodshare – 🚀 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
    • social networks, const app, new Vue, docs Update docs, Import vue-goodshare bundle
  • Consider the following where we attempt to use before it has loaded: – – In a complex web application this system is insufficient because: – – A solution to the dependency management problem is to use a module system where code is modularized and imported into other scripts.
  • In the example project, app.js is the entry file and has just one dependency, Vue.js.
  • For the example project, the graph includes app.js, vue.js and a few other dependencies required by Webpack.
  • In the example project, the bundle file will replace the individual script files vue.js and app.js in the HTML document: – – Webpack provides a reliable solution to the JavaScript dependency management problem.
  • For example, in app.js we use the ES2015 , which isn’t supported by IE10: – – If the Webpack Babel loader is used will be transformed to before it’s added to the bundle: – – There are many other loaders including: – – Webpack uses a declarative config file to…

Tags: example project, Webpack, ES modules, dependency management problem, HTML document

  • With this architecture, components are responsible for managing their own AJAX requests and state independently.
  • would contain the AJAX logic, and would manage data for all the components in this group, communicating via props and events.
  • To make implementation of this architecture easier, you can abstract any AJAX logic into a mixin, then use the mixin in a component to make it AJAX-enabled.
  • With this architecture, your app is split into pages, and all data required for a page and its sub components is fetched when the route is changed.
  • Then you can implement a generic hook that will merge all the data properties into the page component’s data: – – It’s not advisable to use AJAX to retrieve application state on the initial page load, as it requires an extra round-trip to the server that will delay your app…

Tags: AJAX, AJAX logic, root instance, AJAX requests, data

  • Vue.js component for social share.
  • A simple way to share a link on the pages of your website in the most popular (and not so) social networks.
  • Simple install, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.
  • Just choose one, add attribute to component and save!
  • Init component after Vue.js in your main JavaScript file.

Tags: social networks, const app, new Vue, docs Update docs, Import vue-goodshare bundle

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.