Your Choice JavaScript News

Vue News Tuesday, December 5

Vue News TLDR / Table of Contents

  • Cuetron A tool for testing and debugging your Vue + Vuex applications.
    • vuetron – A tool for testing and debugging your Vue + Vuex applications.
    • debugging Vue.js applications, view application state, current Vue dev, app download, specific state variables
  • [Case Study] Why we chose Vue to build our desktop messaging app
    • Amity Messenger is a private messaging, public groups and mobile communities’ app, currently available on iOS and Android. In our first few weeks at Amity, as the company’s first web developers, my…
    • Vue, React, Amity, Amity desktop project, Amity Messenger
  • ASP.NET Core Basics: Vue with an API – Eric L. Anderson
    • In the past, I have done some exploration on Aurelia, Angular and React via the ASP.NET Core Basics series. This post is going to take a similar approach using Vue. The code for the project will be in the same repo as the previous basics examples and will be utilizing the same API to pull data….
    • contact list, vue, Vue project, contact list component, Vue specific items
  • How to Build a Killer Vue.js Blog and Launch it in 2 Hours Tops
    • The result will be a JAMstack-ready, truly decoupled Vue blog you can plug into any data source — more on that later. I won’t go into the details of the webpack setup. But those familiar with Vue…
    • Vue, vue.js blog, Vue.js blog demo, Vue blog application, truly decoupled Vue
  • Handling Laravel Validation Error Messages With Vue.js ― Scotch
    • Recently, I launched a open source side project I was working on called Open Laravel. Open Laravel allows developers to submit open source projects that were built using the Laravel framework. The project submission page uses Vue.js to submit the form asynchronously through an AJAX request. Since I am no…
    • validation error messages, Laravel Elixir, form validation error, Laravel validation error, Laravel Elixir dependencies
  • Open Sourcing Your First Vue Component – codeburst
    • In case you’re new to Vue, it’s an awesome javascript front-end framework that makes writing reusable, testable UI components a breeze! I recently wrote about how I love Vue’s data-driven design and…
    • vue, open source software, vue component, existing Vue projects, testable UI components
  • Upload Files To A Remote Web Service Via A Vue.js Web Application
    • Learn how to upload files in a web application built with the Vue.js JavaScript framework to a remote web service or API.
    • remote web service, vue.js web application, axios library, different front-end framework, file uploads
  • The Story of our Progressive Migration from Backbone to Vue.js – Snipcart
    • We share our insights on our Saas refactoring from Backbone to Vue.js. Learn the reasons why we had to do it, and the way we are doing it.
    • Vue component, template editor, Vue components, multiple Vue components, old Backbone architecture
  • A mini social network built by Vue.js
    • Vue.js Book! The first Vue.js 2 and Laravel book! Learn by building awesome interactive web applications
    • social network, helpful Vue.js tutorials, Quick Start Guide, Multiple file uploads, cool dashboard
  • We really like the current Vue dev tools for chrome and wanted a way to extend that functionality by hooking onto the vue application itself, so we built Vuetron!
  • With Vuetron you have the added the ability to subscribe to specific state variables, observe API requests and responses, and visualize the component structure of your application giving you a larger toolkit for testing and debugging your Vue.js application.
  • To use Vuetron, you will need both the desktop application and node module in your Vue project.
  • If you want to test out Vuetron before you commit to installing it in your project, you can fork or clone our example app with the plugins pre-configured.
  • (Vuetron app download required separately) – – Read the TESTING.md file for more information on running tests.

Tags: debugging Vue.js applications, view application state, current Vue dev, app download, specific state variables

  • [Case Study] Why we chose Vue to build our desktop messaging appThis post was written by Chris Smith, a front-end web developer at Amity.IntroductionAmity Messenger is a private messaging, public groups and mobile communities’ app, currently available on iOS and Android.In our first few weeks at Amity, as the company’s…
  • In this article, we reveal why.We’ll start by outlining what we needed in a Javascript framework for the Amity desktop app and how we conducted our investigation, then we’ll delve into our findings with respect to the three main frameworks we considered — Vue, Angular and React.
  • We knew that for every line of documentation we had to read there was a line of code we couldn’t write, so we were especially eager to settle on a framework that we could both easily adopt.In light of these requirements (ease of development, performance, community, learning curve and expected…
  • I compared the pros and cons of each with respect to things like licensing limitations, learning curves, performance, community size and activity, tooling, complexity and flexibility and ultimately settled on the three shortlisted contenders, Vue, Angular and React.After that initial filtration process was complete, both Dan (back-end) and I (front-end)…
  • Beyond that, Dan and my experience with Angular 1 meant the learning curve for Vue was small, we were impressed that its reactivity system allows for automatic DOM redrawing out of the box, we found it to have a decent CLI to scaffold a project, and we knew it could…

Tags: Vue, React, Amity, Amity desktop project, Amity Messenger

  • The code before adding the Vue project can be found here.
  • Create a Vue folder at the same level as the other projects, for the samples this would be in the  src folder.
  • Run the following command to create the Vue project.
  • Above the contact interface, add the following imports needed to create a Vue component.
  • This component maintains a list of contacts which gets filled from our existing API when the component is mounted (see the docs for more information on Vue’s lifecycle hooks).

Tags: contact list, vue, Vue project, contact list component, Vue specific items

  • Be it to refactor your app’s frontend, craft a complex, SEO-friendly SPA, or launch a simple blog.And building a Vue.js blog is precisely what I’m going to focus on today.In this post, I’m going to provide an open source Vue.js blog demo and cover:Setup and routingDisplaying your blog feed with…
  • We’ll get into why the Vue app’s Sass is separate from the components another time.The src/resources folder is where we’ll put our decoupled data-access layer which we discuss towards the end of the post.The component tree itself is nothing groundbreaking:Blog – Our homepageBlogNav – Handles navigation logicBlogFeed – Renders the…
  • Vue-Router grabs any path nodes preceded by : as variables and injects their value into the route’s component as props.Last but not least, we do the same thing for the /read/:post route, which will display a single blog post’s content.Rendering the blog feedFor now, we’ll skip over actually fetching our data and…
  • /resources folder in our project you’ll see the implementation directory.Open up implementation offers a post() method, expecting a post id as a parameter.It then returns an object containing the computed path and a resolver function that maps the correct response data to the component.
  • Keep in mind, the goal here is to shape the data to match your components and not the other way around.Connecting the dotsNow we can get things going by telling Vue to use our custom plugin.

Tags: Vue, vue.js blog, Vue.js blog demo, Vue blog application, truly decoupled Vue

  • DOCTYPE html – html – head – // add csrf token – meta id=”token” name=”token” value=”{{ csrf_token() }}” – – titleHandling Laravel Validation Error Messages With Vue.js/title – – link rel=”stylesheet” link rel=”stylesheet” type=”text/css” – – style – body { – padding: 50px; – } – /style – /head -…
  • has-error’ : ” }}” – labelPost Title/label – input type=”text” name=”title” class=”form-control” v-model=”post.title” value=”{{ old(‘title’) }}” – – // display errors if field has errors using FormError component – form-error v-if=”errors.title” :errors=”errors” – @{{ errors.title }} – /form-error – /div – – // add Bootstrap .
  • has-error’ : ” }}” – labelPost Body/label – textarea name=”body” class=”form-control” rows=”5″ v-model=”post.body”{{ old(‘body’) }}/textarea – – // display errors if field has errors using FormError component – form-error v-if=”errors.body” :errors=”errors” – @{{ errors.body }} – /form-error – /div – – button type=”submit” class=”btn btn-primary”Create Post/button – /form – /div…
  • container’, – – // define components – components: { – FormError, – }, – – data: { – post: { – title: ”, – body: ”, – }, – – submitted: false, – – // array to hold form errors – errors: [], – }, – – methods: { -…
  • then(function(response) { – // form submission successful, reset post data and set submitted to true – this.post = { – title: ”, – body: ”, – }; – – // clear previous form errors – this.

Tags: validation error messages, Laravel Elixir, form validation error, Laravel validation error, Laravel Elixir dependencies

  • Image credit: + https://vuejs.org/In case you’re new to Vue, it’s an awesome javascript front-end framework that makes writing reusable, testable UI components a breeze!
  • If your components seem too tightly coupled to your application structure, maybe it’s time to ask “What do I need to do to open source this?” At Educents, we built an autosuggest component that would be flexible enough to eventually abstract for general use cases while still solving our real…
  • Here are some mature projects we used as templates when writing a plugin:Of course you should also read the official docs for an overview on how plugins in Vue work.If you’re already segmenting your UI library into prop-driven components, then open sourcing a component isn’t much more than a simple…
  • If you include it in a script tag, you can simple load it into your Vue app like your lib is on npm, loading the plugin as a module in your build tools (such as webpack), is as simple as installing and importing:import VueToAKill from ‘vue-to-a-kill’; Vue.use(VueToAKill);Test Your Vue ComponentVue…
  • I’m rendering the component, and checking that the agents prop I’m passing is rendered in the result Vue html with the desired number of li tags.Example vue-test-utils test file using snapshot testing and Jest.Try to aim for 100% coverage on vue component libraries since it is far easier to obtain…

Tags: vue, open source software, vue component, existing Vue projects, testable UI components

  • A few weeks back I wrote about accepting file uploads in a Node.js application that uses Hapi framework.
  • We’re going to take a look at using FormData and Vue.js to upload files, such as images, to a remote web service.
  • vue file for our project should look like the following: – – If everything was done correctly in the Vue.js application and the backend application, you should see files on your server depending on what you’ve chosen to upload.
  • You just saw how to upload files to a remote web service via a Vue.js web application.
  • If you haven’t already, I highly recommend you check out my example regarding file uploads with Hapi and Node.js.

Tags: remote web service, vue.js web application, axios library, different front-end framework, file uploads

  • We were looking at the new kids on the block such as React and Vue.js, and realized that the way these frameworks were dealing with the components was much more friendly.
  • What we did first was to create a Backbone view that will be responsible for rendering Vue components.
  • In our case, it’s a wrapper that allows us to render Vue components inside a Backbone view.
  • The code of this view, which I named (clearly the best class name I ever wrote 🙂 ), looks like this: – – In our router, we render the view like this: – – This way, we’ve been able to start adding new components in Vue into our dashboard.
  • I don’t really love the idea of saving such a local state in Vuex, although I will live with it since I know we will eventually refactor our template editor in a Vue component, enabling us to easily delete the field.

Tags: Vue component, template editor, Vue components, multiple Vue components, old Backbone architecture

Tags: social network, helpful Vue.js tutorials, Quick Start Guide, Multiple file uploads, cool dashboard

Comments are closed, but trackbacks and pingbacks are open.