Your Choice JavaScript News

Vue News Friday, April 6 Data, Component, Component & more…


What’s new?

  • The value is what the field should have a value at the beginning (like an ordinary input field), the data is an array of objects while the field is what property should be used from the data’s selected element.
  • if we want to specify more information about the props (which we should unless you are super lazy like me) we replace the props strings array with this: – – Let’s use the previous data example to demonstrate how to pass the data to the component, to do that we…
  • the directive allows us to loop through the data array so we can display each suggested string under the input.
  • this later allows us to bind the input to a data property, but we can’t use the value property since it is defined in props and props data can only pass in one way from the parent to the children.
  • Now, the component should act like an input field but we might want to add the ability to bind input, to achieve that we should emit input event when that data changes.

Tags: data, input field, component, component stores data, functional autocomplete input


  • The example page we are going to use contains several sections or blocks: – a header (these days, a large hero image taking the whole above-the-fold area)a section with a few imagesanother section with a heavy component like a mapa footerThe basic structure of a page we will be using…
  • class Observer extends Component { – constructor() { – super(); – this.state = { isVisible: false }; – this.io = null; – this.container = null; – } – componentDidMount() { – this.io = new IntersectionObserver([entry] = { – this.setState({ isVisible: entry.isIntersecting }); – }, {}); – } – componentWillUnmount() {…
  • this.props.children.map(child = child(this.state.isVisible)) – : /div – ); – } – }The component uses IntersectionObserver to detect that the container intersects with the viewport, that is, its visible.
  • Now, we can use this component to lazy load two of our components, Gallery and Map: – const Page = () = { – div – Header / – Observer – {isVisible = Gallery isVisible /} – /Observer – Observer – {isVisible = Map isVisible /} – /Observer – Footer…
  • Lets take a look at the Map: – class Map extends Component { – constructor() { – super(); – this.state = { initialized: false }; – this.map = null; – } – – initializeMap() { – this.setState({ initialized: true }); – // loadScript loads an external script, its definition is…

Tags: component, components, component world components, Google Map, High Order Components


  • To set up the environment, create a new directory and navigate to it (using the terminal), then install Vue-cli using this command: .
  • Run the following commands to install Highcharts and Highcharts Vue wrapper: – – – – – – Once the installation has finished, you will see that configuration files have been automatically added to your directory, such as index.html, App.vue, main.js, etc.
  • Open the main.js file and add the following code: – – Then, register the wrapper on the global scope using Vue.use: – – The demo displays three different charts: a spline chart, a stock chart, and a map chart.
  • However, the constructor-type attribute is required for the stock and maps charts: – – Script – – The script element is where the charts options and data are stored: – – Dont forget to wrap those options and data into a component object to use it later: – – Style…
  • Next, import those components into the App.vue file: – – For the rest of the code, feel free to copy the code from this GitHub link.

Tags: Highcharts Vue wrapper, interactive web charts, script element, style element, heavy lifting configurations


  • For the first demo, I’ll show an example of a form that lets you duplicate a set of fields to enter additional data.
  • That may not make much sense, so let’s start with the demo first so you can see what I mean: – – See the Pen Form – Duplicate Row by Raymond Camden (@cfjedimaster) on CodePen.
  • On top is a set of basic, static fields.
  • The only real interesting part here is defaulting friends with the first set of values so I get at least in the UI.
  • Here is the finished demo: – – See the Pen Shipping same as Billing in Vue.js by Raymond Camden (@cfjedimaster) on CodePen.

Tags: Raymond Camden, common form UX, proud failed Google, shipping street,


  • Google Firebase has a new data storage possibility called Firestore (currently in beta stage) which builds on the success of the Firebase Realtime Database but adds some nifty features.
  • My choice falls on Vue.js as its a Javascript-rendering framework, backed by the Firebase suite (by Google) and its new real-time database called Firestore.
  • You can enter them via the Firestore console, but you can also use the Firebase CLI to install them from a file on disk.
  • An alternative is to create a Firebase Cloud Function that activates on every posted Ball and appends it to the walls of all the authors friends.
  • Firestore is still in beta, so not a lot of active users there yet, but the Firebase suite is already being used by National Public Radio, Shazam, and others.

Tags: Firebase, Firebase Realtime Database, web app, Firebase CLI, Firebase suite


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.