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

Comments are closed, but trackbacks and pingbacks are open.