Your Choice JavaScript News

Vue News Monday, February 12

Vue News TLDR / Table of Contents

  • Vue.js News Announcement – The Vue Point –
    • We are excited to announce the Vue.js News platform. We aim to provide a reliable way to follow on all the important news for Vue.js developers like you.
    • Vue related newsletter, rapidly growing ecosystem, new subscriber notifications, Vue.js News platform, Vue Mastery team
  • Building a Modal Component with Vue.js
    • How to create a reusable and accessible modal component in Vue.js using slots and transitions
    • px, button type, reusable modal component, modal box, div class
  • Vue on 2018 — Interview with Evan You, author of the Vue.js framework
    • No one can deny it: Vue.js is booming. The Progressive JavaScript framework is making big gains with a growing community of users & a large amount of developers wanting to learn how to use it. Will…
    • Vue, Evan, React, Vue users, core team
  • How to Build a Portfolio Site Using Vue and Cosmic JS | Cosmic JS
    • Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
    • Cosmic JS, plain text input, Cosmic JS API, ,
  • Switching From React To Vue.js
    • Thinking about a switch from React to Vue? They’re similar beasts but with a few key differences. In this article I’ll explain the differences so you’re ready to jump in to VueJS and be productive.
    • Vue, Vue’s reactivity, Vue’s components, Vue components, Vue projects
  • Vue.js News AnnouncementSome of you might have already found out, but today its officialwe are excited to announce the Vue.js News platform.
  • Right from the source.The news platform consists of:Weekly Newsletter (previously known as Vue.js Newsletter)News Podcast covering the highlights from the newsletterA webpage where you can read and listen to all of the aboveHow it allstartedOne and a half year ago, some time in July, I got together with Krzysztof Jung…
  • To the point we had to turn off the new subscriber notifications as the emails flooded our mailboxes in the first several minutes after announcing the newsletter.
  • If youre not a subscriber yet, subscribe here!More than just a NewsletterAlthough the Vue.js Newsletter project started as side-project for Krzysztof and me while working at Monterail, thanks to the generous donation from Monterail, the newsletter has since become the official news channel for the Vue.js organisation.
  • Due to their involvement, each newsletter issue will be additionally covered in the form of a weekly podcast.Now you will be to get the news the way you like it.You can already subscribe to the podcast on: Apple Podcasts, Android, Stitcher or simply using RSS.Get involvedOf course, even we wont…

Tags: Vue related newsletter, rapidly growing ecosystem, new subscriber notifications, Vue.js News platform, Vue Mastery team

  • In this article youll learn how to create a reusable modal component using transitions and slots.
  • Well need a div for the backdrop shade, a div to act as the modal box and some elements to define its structure: – – Notice the use of slots?
  • Lets set some defaults for the slots, the wrapper elements and the initial CSS to make it look like a basic modal.
  • Every time a component or an element wrapped by a transition is inserted or removed, Vue will check if the given element has a CSS transitions and will add or remove them at the right time.
  • First lets start by adding a transition wrapper component to our modal: – – Now lets add a transition for the opacity to fade slowly by using the applied classes: – – Now our modal opens and closes smoothly!

Tags: px, button type, reusable modal component, modal box, div class

  • I was using Angular and I wanted to build something lighter, so I started to experiment in the early stages – I think for about 6 months.I was becoming pretty bored and decided to turn Vue into a proper open source project.
  • Today people consider Vue an equal choice as to Angular and React.
  • But Angular, React and Vue each have a group of users that are naturally attracted to the solution because it sits well with their mental model.React kind of attracts a lot of functional oriented programmers.
  • Vue was able to fill a market gap between React and Angular and thats why we were able to grow to where we are today.How would you counter critics that say theres no big company behind Vue?
  • You can look at the track records and see how we handled breaking change in the past: we dont want to break our users code- EvanYouTo be honest there are so many companies, and I think around 300.000 developers using Vue in the world today.

Tags: Vue, Evan, React, Vue users, core team

  • To create the bucket, login to Cosmic JS and click add new bucket – – Click add object type menu and put Profile on singular name textbox – – Click add object type menu and put Technology on singular name textbox – – 5.
  • Line 42 49 to call Cosmic JS API when the component is mounted and the style is on line 54 77.
  • Line 33 42 to call Cosmic JS API when the component is mounted.
  • Line 33 42 to call Cosmic JS API when the component is mounted.
  • Line 28 34 to render the technologies array and on line 38 48 to call Cosmic JSAPI with metafield_key is open_source and metafield_value is No for projects page and metafield_value is Yes for open source page.

Tags: Cosmic JS, plain text input, Cosmic JS API, ,

  • React and Vue have more similarities than differences: – – The big differences are that Vue typically uses an HTML template file where as React is fully JavaScript.
  • Youll probably notice familiar aspects of Vues components, and not-so-familiar aspects: – – Youll notice the component has a property which is a string of HTML markup.
  • As with React, Vue needs to mounted somewhere in the page: – – But unlike React, you can continue to add to this main as it is the template for your root component.
  • Heres how you add Vue to a single HTML file project: – – If youre happy to add a build step to your project with a tool like Webpack, you can utilise Vues Single File Components (SFCs).
  • These are files which have the extension and encapsulate the component template, Javascript configuration and style all in a single file: – – These are without a doubt one of the coolest features of Vue because you get a proper template with HTML markup, but the JavaScript is right there…

Tags: Vue, Vue’s reactivity, Vue’s components, Vue components, Vue projects

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.