Your Choice JavaScript News

Webpack, Webpack presets design, Vue test utils & more… Vue News Sunday, February 25

Vue News TLDR / Table of Contents

  • – Whats new?There are so many new things in webpack 4, that I cant list them all or this post would last forever.
  • Currently built, we now have 5 module types implemented: – javascript/auto: (The default one in webpack 3) JavaScript module with all module systems enabled: CommonJS, AMD, ESMjavascript/esm: EcmaScript modules, all other module system are not available (the default for.
  • json extensions in this order to resolveWhats most exciting about this feature, is that now we can continue to work on our CSS and HTML module types (slated for webpack 4.
  • If you use HtmlWebpackPluginFor this release, we gave the ecosystem a month to upgrade any plugins or loaders to use the new webpack 4 APIs. However, Jan Nicklas has been away with work obligations and therefore, we have provided a patched fork of html-webpack-plugin.
  • Ill personally send you a screen shot of each one if youd like Whatsnext?We have already started planning our next set of features for webpack 4.

Tags: webpack, webpack presets design, legato, old JS Framework, largest OpenCollective sponsor

  • Testing Vue Components WithoutNodeSometimes, you may find yourself in a situation in which you cant use Node for your tooling.
  • While this is the case for some of those libraries, theres a fairly simple way of doing unit tests with Vue components.
  • In case you missed it, Edd Yerburgh (a core team member), published this post a few months ago detailing a new shiny toy for Vue testing.
  • Its a nice toy that appears to have a similar API to Airbnbs Enzyme library thats used for testing React components.
  • If youre new to testing altogether, these are two libraries that you should consider playing with prior to testing with the Vue Test Utilities.

Tags: Vue Test Utils, Vue Template Compiler, Vue Test Utilities, new shiny toy, fairly simple way

  • My guilty pleasure is I enjoy fixing bugs.
  • Each bug is like a mini-puzzle, and (usually) is apparent whether or not it is fixed or still broken.
  • I wish there were refactoring tools for C++, like I had JetBrains ReSharper for C#.
  • The one surprise I had was how much I enjoyed TDD using C#, NUnit, and the awesomely amazing test-runner NCrunch.
  • I really miss that now that I’m back in C++.

Tags: ideal monitor setup, awesomely amazing test-runner, problematic legacy, old code, JetBrains ReSharper

  • The HTML – Here’s the HTML for our message: – – div id=app – article class=message – div class=message-header – Hello World – /div – div class=message-body – div class=message-content – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Adding Vue Directives – Next up, let’s start adding our Vue into this template: – – div id=app – article class=message :class=accordionClasses – div class=message-header @click=toggleAccordion – Hello World – /div – div class=message-body – div class=message-content – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • message-content { – padding: 20px; – } – The Vue JavaScript – Now we need to create our JavaScript data: – – – isOpen will determine if we should open or close the accordion – accordionClasses will house our classes that we want to apply based on the isOpen variable…
  • — our template — – section id=app class=section container – – article class=message :class=accordionClasses – div class=message-header @click=toggleAccordion – Hello World – /div – div class=message-body – div class=message-content – Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • — our javascript — – script – const app = new Vue({ – el: ‘#app’, – data: { – isOpen: true – }, – methods: { – toggleAccordion: function() { – this.isOpen = !

Tags: Vue, data variables, CSS styles, ,

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.