Your Choice JavaScript News

Vue News Wednesday, March 28 Javascript file, Simple vue.js app, Vue & more…

Vue News TLDR / Table of Contents

  • Step-by-Step: A Simple Vue.js App – Warren Francis –
    • Let’s build an app! It’s going to be simple and I’ll do a lot of explaining — a kind of Vue.js show-and-tell, for newbies. If all goes well, you’ll learn how Vue sees the world, feel inspired to…
    • JavaScript file, Simple Vue.js App, new Vue instance, single-user voting app, Vue event listeners
  • My first open source project using Vue.js –
    • Last year I decided to start working on version 2.0 of WebIssues, an open source, multi-platform system for issue tracking and team collaboration. The first version that I wrote in 2005 was a desktop…
    • Vue, Vue components, large HTML file, basic Vue components, Vue single file
  • A Brief Intro to Using Vue.js with NativeScript
    • Welcome to a week of Vue.js on the NativeScript blog! Today we are taking our first look at NativeScript-Vue and how we can easily get up and running using the NativeScript Playground.
    • native mobile app, NativeScript, NativeScript Playground app, mobile app development, Angular
  • For starters, you now have a JavaScript file, where you created a new Vue instance and passed it a configuration object.
  • After this step, the contents of your files should match this: – Step 4Looking at the JavaScript first, youve added a new entry to the Vue instances configuration object: methods.
  • Youll also define a method that the event listener can call, which will grab the inputs text from the event, build a new framework object, add it to the list, then clear the input.
  • So, you can use event.target.value as the framework name when you build the new object for pushing onto the frameworks list, and you can set event.target.value to the empty string when youre done, to start fresh for the next entry.
  • In the JavaScript, that remove function works by filtering frameworks to only include things that arent f. – Step 7: Persistence Using LocalStorageCurrently, each time you refresh the page, you reset the apps state to the hard-coded framework list.

Tags: JavaScript file, Simple Vue.js App, new Vue instance, single-user voting app, Vue event listeners

  • The second phase was splitting this large HTML file into a few basic Vue components: the header, sidebar, toolbar and grid.
  • As a result, I had the same prototype, but instead of one large HTML file, it consisted of a few Vue components.
  • I recommend using Vuex in almost every Vue project, unless its just a very simple widget.
  • Also if the logic of a component becomes complex, its probably a good idea to separate it from the presentation and move it to a Vuex module.
  • Generally, routing is often very tightly coupled to the application state and its not just a matter of swapping components.

Tags: Vue, Vue components, large HTML file, basic Vue components, Vue single file

  • This week we are bringing you loads of Vue-related content, focusing on the NativeScript-Vue plugin that brings the world of Vue.js to native mobile app development.
  • Since Vue.js doesn’t (directly) interact with the browser’s DOM (similar to React and Angular), code you might have thought was only meant for the web works just fine in a NativeScript app (save for different template syntax): – – Now if you’re here, you probably: – – Transitioning from the…
  • NativeScript is an open source (Apache 2 licensed) framework for building native, cross-platform mobile apps from one codebase.
  • Think along the lines of JavaScript + CSS + XML-flavored markup with a bit of NativeScript UI magic turns this: – – With the pleasantries out of the way, let’s take a quick look at using NativeScript-Vue to create a quick app that will work equally well on iOS and…
  • With the NativeScript Playground open, click the New menu and choose to create a new Vue.js instance (if you’re not already using a Vue template): – – Next, click the QR Code menu option and scan that code using the previously downloaded NativeScript Playground app on your device.

Tags: native mobile app, NativeScript, NativeScript Playground app, mobile app development, Angular

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.