Your Choice JavaScript News

Vue News Friday, May 11 Helpful laravel tutorials, Practical single-page applications, Json data query & more…

What’s new?

  • Akaunting has just announced the release of Akaunting 1.2 [Recurring] stable version.
  • This release comes with lots of new features such as recurring invoices/expenses, profit & loss report, tax report and translations such as Bulgarian, Danish, Greek, Hebrew, and Ukrainian.

Tags: helpful Laravel tutorials, drop sortable list, practical single-page applications, dream Laravel PHP, stable version

  • JsonQ is a library for JSON data query that developed with PHP and it also supports Laravel.
  • You can import JSON file from anywhere in your project.
  • It handles and queries your imported JSON data magically.

Tags: JSON data query, JSON file, helpful Laravel tutorials, drop sortable list, practical single-page applications

  • For example: – Entire `v-for` broken due to `null` value on a single elementIn Vue 2.5 the errorCaptured hook was introduced and opened up some cool opportunities for handling errors in Vue applications.
  • Simple ErrorBoundary ComponentThis allows us to utilize this components to capture errors and display a fallback UI in case of an error like so: – error-boundary – counter / – /error-boundaryAnd that is literally it.
  • Helps to keep components free from error handling logicAllows us to use declarative component composition instead of relying on imperative try/catchWe can be as granular as we want with itwrap individual components or entire application piecesIn ActionLets create a simple ContactList component which renders a Contact component which will just…
  • The ErrorBoundary will capture the error from the Contact component and instead render pSomething went wrong/p.
  • Additional ReadingVue API Documentation for errorCapturedprovides more details about the parameters errorCaptured receives and how errors propagateError Handling in React 16where I drew inspiration to build this component and see if Vue had something similar

Tags: fallback UI, better user experience, simple ContactList component, error, unforeseen error

  • The allowedGlobals function calls the makeMap function and passes concatenated strings.
  • the makeMapfunctionAs we discussed in post six, makeMap is a function that make[s] a map and return[s] a function for checking whether a key is in that map.
  • The function: – takes a string and a boolean as parameters,creates an empty object,splits the string at each comma,and loops through the split string setting each item as a key on the map to true.Finally, makeMap returns a function (creating a closure) for checking whether a key is in the…
  • Otherwise, it just looks for the key passed as a parameterTurning back to the has method of the hasHandler object from the last post: – hasHandlerIt now makes more sense.
  • has will call the warnNonPresent function if (a) the key is not on the target or its prototype or (b) if the key is not one of the whitelisted allowed globals or does not start with an underscore.

Tags: Vue.js source code, source code line-by-line,

  • Managing Your Vue.js Applications State with VuexPart3In previous articles, I introduced you to Vuex, and subsequently showed you how to structure your store in small modules.
  • Your Vuex store will most likely include some complex business logic; therefore, it is crucial that you cover this functionality with some unit tests, to ensure that everything behaves as expected, especially as your store is growing and your components start relying more and more heavily on it.
  • In this case, we want to make sure that our mutations can add blog articles and post comments to the store: – Testing MutationsThere are a few key concepts in this example – We include jasmine-expect, a library which extends the default set of assertions and adds some very useful…
  • Testing ActionsTesting actions is another crucial point, as it usually involves tasks such as: – Transforming dataCommitting a mutationAnd sometimes even handling asynchronous operationsTesting synchronous actionsThe interesting bits in this spec are: – We use Sinon.js, a mock library, in order to mimic the behavior of the commit method, allowing…
  • ConclusionWe just learned how easy and painless it is to test the functionality of our Vuex store; it is a crucial part of any application implementing it, and therefore it makes a lot of sense to take the time to ensure that the logic behaves as expected, and will not…

Tags: unit tests, store, complex business logic, fictional Vue.js blog, following basic store

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.