Your Choice JavaScript News

Vue News Wednesday, January 31

Vue News TLDR / Table of Contents

  • Switching from React to Vue.js
    • These days, many React developers are switching to Vue.js. They have similarities, but also  differences. Many of these differences are a reflection of how much Vue has been influenced by Angular.Wha…
    • Vue, React, Vue’s components, developers, Vue components
  • Building a Modal Component with Vue.js ← Alligator.io
    • 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
  • Building Vue.js Apps with Parcel ← Alligator.io
    • Do you have a soft spot for zero-config module bundlers? Tired of configuring webpack? Take a look here at how to build your Vue.js apps with ParcelJS instead!
    • Parcel out-of-the box, perfectly bundled app, in-depth Parcel guide, official Parcel documentation, alternative module bundler
  • Vue JS vs Angular: comparación entre líder y aspirante
    • En este post vamos a intentar destacar las principales diferencias entre Angular y Vue.js. Vue.js ha crecido mucho en un período de tiempo muy corto. En este sentido, el crecimiento de Vue ha sido superior al de Angular en sus inicios.
    • angular manipula dom, comunidad enorme detrás, Document Object Model, principales diferencias, React Js
  • Getting Started with Vue.js: Processing a Form with Vue ― Scotch
    • Processing a form can be a long and tedious task when using vanilla JavaScript or jQuery. While those tools can help to make your AJAX forms very clean, and provide your user with immediate feedback and validations, writing the code can become a bit convoluted.
    • form, Vue instance, parent Vue instance, Current Favorite CSS, form input change
  • Build social media platform with the Steem Blockchain #1 — Vue.js, Storybook.js and Steem.js
    • Welcome to a new series, where we will build a full blogging platform with Vue.js and Storybook, based on the Steem blockchain! Learn how to use Storybook.js for Vue, and how to build decoupled…
    • storybook, presentational component, social media platform, steem blockchain, decouple presentational components
  • Creating a Vue.js Serverless Checkout Form: Setup and Testing
    • There comes a time in any young app’s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire
    • serverless function, Serverless Function app, serverless concepts, API section, free trial
  • Build A Collapsible Tree Menu With Vue.js Recursive Components
    • A recursive component is one which invokes itself and is useful for displaying comments on a blog, nested menus or anything where the parent and child are the same. In this tutorial, I’ll give you a demonstration of how to build a collapsible tree menu.
    • recursive UI components, recursive components, recursive data structure, recursive data structures, single root node
  • Vuex ORM – a plugin for Vuex to enable Object-Relational Mapping.
    • Vue.js Book! The first Vue.js 2 and Laravel book! Learn by building awesome interactive web applications
    • Vuex ORM, practical single-page applications, simple CRUD application, helpful Vue.js tutorials, Multiple file uploads
  • JavaScript, CSS and Vue.js Launch
    • Today we’re excited to announce that StyleCI has levelled up, introducing long-awaited support for JavaScript, JSX, Typescript, CSS, SCSS, Less and Vue.js. Following the beta, new languages are available to Solo, Startup and Premium plans, and to those who helped during the testing phase. 🙌
    • long-awaited support, Premium plans, testing phase, new languages, relevant documentation
  • India at 70 – Made with Vue.js
    • A conference website made with Vue.js
    • Vue.js Admin Template, PJ Blog, VivifyScrum Web-based project, open source blog, useful informations

Score: 95000
URL: https://www.freelancer.com/community/articles/switching-from-react-to-vue-js?ft_prog=CTC&ft_prog_id=1253
Tweeted At: Wed Jan 31 02:00:03 +0000 2018
Publish Date: 2017-09-06T08:09:33+00:00
Author: LucyKarinsky

  • The main differences between React and Vue are that React uses JavaScript, while Vue relies on HTML.
  • In Vue, developers are encouraged to prepare templates, using regular old HTML.
  • Developers should remember that unlike React, Vue does not support render functions and JSX.
  • Developers do not need a setState method to alter the component state in Vue.
  • To bootstrap a project in Vue, developers should use vue-cli, which can generate a fully decked out Webpack and Server-side rendering project, and a simple project with an individual HTML file.

Tags: Vue, React, Vue’s components, developers, Vue components

Score: 49000
URL: https://alligator.io/vuejs/vue-modal-component/
Tweeted At: Wed Jan 31 05:56:00 +0000 2018
Publish Date:
Author: Filipa Lacerda

  • In this article you’ll learn how to create a reusable modal component using transitions and slots.
  • We’ll need a div for the backdrop shade, a div to act as the modal box and some elements to define it’s structure: – – Notice the use of slots?
  • Let’s 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 let’s start by adding a transition wrapper component to our modal: – – Now let’s 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

Score: 33000
URL: https://alligator.io/vuejs/vue-parceljs/
Tweeted At: Mon Jan 29 21:28:00 +0000 2018
Publish Date:
Author: Joshua Bemenderfer

  • The canonical way to build & bundle a Vue.js application is with webpack, and indeed, pretty much everything Vue-related assumes that you’ll be using webpack.
  • So, let’s take a look at how to set up parcel for a Vue.js app.
  • In contrast to our usual steps, let’s go ahead and set up the skeleton app files before we do anything else.
  • First, let’s install everything we need for the Vue app itself.
  • For more information about built-in asset types, take a look at the official Parcel documentation.

Tags: Parcel out-of-the box, perfectly bundled app, in-depth Parcel guide, official Parcel documentation, alternative module bundler

Score: 25000
URL: https://openwebinars.net/blog/vue-vs-angular/
Tweeted At: Tue Jan 30 10:06:15 +0000 2018
Publish Date: 2017-08-22T08:29:48+00:00
Author: Daniel Ortego

  • Si hay un framework en el mercado que no para de crecer, atractivo y con una comunidad enorme detrás, ese es Angular.
  • Tanto Angular como Angular 2 poseen gran parte del mercado por muchas razones que ya hemos comentado en otros post.
  • Pero eso no implica que no aparezcan nuevos frameworks que puedan llegar a ser algún día tan importante como lo es ahora el framework de Google.
  • En este post vamos a intentar destacar las principales diferencias entre Angular y Vue.js.
  • Si quieres aprender más sobre estos frameworks no olvides que dentro de nuestra suscripción tenemos un curso de Angular 4 muy completo que te ayudará a comprender este framework en profundidad así como un curso de Vue.js para que comiences a crear tus aplicaciones con esta librería.

Tags: angular manipula dom, comunidad enorme detrás, Document Object Model, principales diferencias, React Js

Score: 14250
URL: https://scotch.io/courses/getting-started-with-vue/processing-a-form-with-vue
Tweeted At: Mon Jan 29 19:19:19 +0000 2018
Publish Date:
Author: Chris Sevilleja

  • // listen for the submit processSignupForm); – function processSignupForm(e) { – e.preventDefault(); – – // get our data – const name = nameInput.value; – const email = emailInput.value; – – console.log({ name, email }); – – // process the form!
  • const app = new Vue({ – el: ‘#signup-form’, – – // our data – data: { – name: ”, – email: ” – } – }); – We have our Vue instance looking at the form with the id of signup-form.
  • … – – input – type=”text” – class=”input” – name=”name” – v-model=”name” – – … – – input – type=”email” – class=”input” – name=”email” – v-model=”email” – … – We’ll use v-model to bind a data variable to an input.
  • You can visit your browser console and type: – app.name = ‘My New Name’; – Press enter and you’ll immediately see your form input change!
  • Inside our Vue instance, let’s add the methods and our new processForm method: – const app = new Vue({ – el: ‘#signup-form’, – – // our data – data: { – name: ”, – email: ” – }, – – // our methods – methods: { – processForm: function() {…

Tags: form, Vue instance, parent Vue instance, Current Favorite CSS, form input change

Score: 12450
URL: https://medium.com/@lachlanmiller_52885/build-social-media-platform-with-the-steem-blockchain-1-vue-js-storybook-js-and-steem-js-a25bd7629a14
Tweeted At: Sun Jan 28 21:04:00 +0000 2018
Publish Date: 2018-01-19T14:29:58.172000+00:00
Author: Lachlan Miller

  • Build social media platform with the Steem Blockchain #1 — Vue.js, Storybook.js and Steem.jsImage: Fintech NewsWelcome to a new series, where we will build a full blogging platform with Vue.js and Storybook, based on the Steem blockchain!Learn how to use Storybook.js for Vue, and how to build decoupled applications using the component/container pattern.
  • Profile.vue will be a what is often known as a presentational component — it will show some data, but should not have knowledge of where the data comes from, or it’s contents.We will use storybook to work on our application UI — this will make the distinction between containers and components more clear.Install and…
  • This way, we can use storybook to see if the UI is correct, and unit tests to make sure the data and props are correct.We want to be able to develop our presentation components, like Profile.vue completely decoupled from the application logic.
  • In the future, I’d like to extract the avatar into a separate component, which I might use in other places on the website, such as a list of followers or next my posts, so I want to key it separate from the other data.We only need to update the template…
  • The developers can go ahead and add more functionality, and we can hand the repository over to the designers, who can work on the UI without even needing to make an API calls — armed with storybook, all the designers need to do is work in Profile.vue, while the developers focus on…

Tags: storybook, presentational component, social media platform, steem blockchain, decouple presentational components

Score: 11400
URL: https://css-tricks.com/creating-vue-js-serverless-checkout-part-one/
Tweeted At: Mon Jan 29 16:09:10 +0000 2018
Publish Date: 2018-01-16T08:19:55+00:00
Author: Sarah Drasner

  • In this four-part tutorial, we’ll go over how to set up a serverless function, make it talk to the Stripe API, and connect it to a checkout form that is setup as a Vue application.
  • First, we’ll head over to the portal, (or if you don’t already have an account, you can sign up for a free trial here) and select New > Serverless Function – – When we click on the Serverless Function app, we’ll be taken to a panel that asks for details…
  • As you can see in the screenshot above, it will autofill most of the fields just from the app name, but let’s go over some of these options quickly: – – This will bring you back to the main portal dashboard and let you know that your function is deploying….
  • If you’d like to play around with a serverless function and see it in action for yourself, you can create one with a free trial account.
  • Now that we have the base of our serverless function, let’s set up what we’ll need to communicate with Stripe!

Tags: serverless function, Serverless Function app, serverless concepts, API section, free trial

Score: 7000
URL: https://www.codementor.io/vuejsdevelopers/build-a-collapsible-tree-menu-with-vue-js-recursive-components-d5npzqh2h
Tweeted At: Tue Jan 30 23:41:11 +0000 2018
Publish Date:
Author: Anthony Gore

  • A tree of recursive UI components will be the visual representation of some recursive data structure.
  • Let’s make a recursive component to display our data structure called .
  • To begin the recursion we invoke the component in our main template, using the root properties for the props: – – Here’s how it looks so far: – – It’d be nice to visually identify the “depth” of a child component so the user gets a sense of the structure…
  • In the component template above you can see that this value will be incremented each time it is passed to any child nodes.
  • Since recursive data structures can be large, a good UI trick for displaying them is to hide all but the root node so the user can expand/contract nodes as needed.

Tags: recursive UI components, recursive components, recursive data structure, recursive data structures, single root node

Score: 6390
URL: https://vuejsbook.com/vuex-orm-a-plugin-for-vuex-to-enable-object-relational-mapping
Tweeted At: Mon Jan 29 12:38:33 +0000 2018
Publish Date:
Author: Vue.Js Book

  • If you are using Vuex to handle JSON data easily, try Vuex ORM.
  • Vuex ORM is a plugin for Vuex to enable Object-Relational Mapping.
  • Vuex ORM provides fluent API to get, search and update Store state.

Tags: Vuex ORM, practical single-page applications, simple CRUD application, helpful Vue.js tutorials, Multiple file uploads

Score: 4770
URL: https://blog.alt-three.com/javascript-css-and-vue-js-launch/
Tweeted At: Mon Jan 29 21:58:36 +0000 2018
Publish Date: 2018-01-29T21:18:43+00:00
Author:

  • Today we’re excited to announce that StyleCI has levelled up, introducing long-awaited support for JavaScript, JSX, Typescript, CSS, SCSS, Less and Vue.js.
  • Following the beta, new languages are available to Solo, Startup and Premium plans, and to those who helped during the testing phase.
  • Extended language support will enable you to use StyleCI for more of your codebase, making code reviews even easier.

Tags: long-awaited support, Premium plans, testing phase, new languages, relevant documentation

Score: 1000
URL: https://madewithvuejs.com/india-at-70
Tweeted At: Tue Jan 30 17:26:02 +0000 2018
Publish Date:
Author: mariojankovic

    Tags: Vue.js Admin Template, PJ Blog, VivifyScrum Web-based project, open source blog, useful informations

    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.


    Comments are closed, but trackbacks and pingbacks are open.