Vue News Saturday, February 10

Vue News TLDR / Table of Contents

A Vue “wrapper” component is a technique used to integrate a 3rd party plugin with Vue by wrapping it in a custom Vue component. The wrapper technique means that you are likely bringing in a library like jQuery and a jQuery plugin. This combination seems to be the most ubiquitous,…

This is the opening post to a tutorial series on using Vue.js and Flask for full stack web development. In this series I am going to demonstrate how to build a survey web app where the application architecture consists of a front-end comprised of a Vue.js Single Page Application (SPA)…

Let’s quickly cover an example of how we might build a wrapper component with a date range picker, which allows you to pick a start and an end date.

For our example, we’ll use the Date Range Picker, which is a Bootstrap component that relies on jQuery and Moment.js.

If we want to make our component react to changes made by the date range picker plugin, we need to hook up a jQuery event to respond to changes: – – You can see that we’ve added a bunch of code to the component, but first look at the updated…

In the parent, we can listen to that event by defining an event attribute: – – A simple event handler example might look like the following: – – Let’s add some more options to the wrapper component to expose more functionality from the underlying date range plugin.

The official Vue documentation has a Wrapper Component Example, which demonstrates using the popular Select2 jQuery plugin in a wrapper Vue component with to bind a custom wrapper component.

So I put the idea to him that we sit down one day with our laptops and show each other what our chosen library had to offer.Anthony (left) and Alexis (right) comparing React and Vue at Bull and Bear Cafe in Chiang Mai, ThailandAfter a lot of discussion and learning from…

These cases can be worked around with a React-like set method from the Vue API.If you need your application to be as small and fast as possible, go with Vue.Both React and Vue will build a virtual DOM and synchronise the real DOM when the app’s state changes.

To be fair you will get a larger API with React, but you don’t get double as much functionality.If you plan to build a large scale app, go with React.A comparison of a simple app implemented in both Vue and React, like the one at the beginning of this article, may…

But React’s rendering system is more configurable and has features like shallow rendering that, combined with React’s testing utilities, allow for far more testable and maintainable code.Meanwhile, React’s immutable application data may not be as succinct, but it shines in larger application when transparency and testability become critical.If you want…

However, the timeline and specifics of this integration are still unclear.Since Vue has HTML templates as a core part of its design and does not have custom rendering as a current feature, it’s hard to see that a native counterpart for Vue.js in its current form will be as tight…

Tags: Vue, React, simple Vue app, unashamed Vue fan-boy, React Native

@JonathanTorke:React or Vue: Which #Javascript UI #Library Should You Be Using? https://t.co/191x9yVKPk

In this series I am going to demonstrate how to build a survey web app where the application architecture consists of a front-end comprised of a Vue.js Single Page Application (SPA) and a backend REST API using the Flask web framework.

Vue components have a specific structure containing a section for component-specific HTML, a section to define the object and that component’s behaviors implemented in JavaScript, and a section for CSS / SCSS rules.

Back in the terminal in the same directory as the package.json file install and save bulma to the project with the following command: – – In addition, I will need to install some dev tools to properly load the styles for the application so the components know how to work…

These two surveys map to the array of survey objects that were in my data function of my component, which I fed into my HTML using the v-for directive.

Given an object such as , iterating with a v-for directive would look like this: – – I have my first functional UI component displaying a collection of surveys, but in the end the actual application will need to fetch survey data from our REST API.

Your web application should reflect changes and interactions in (near) real-time without page loads or other lagging stuff causing to break the flow of the customer.

The WebSocket protocol enables interaction between a browser and a web server with lower overheads, facilitating real-time data transfer from and to the server.

We subscribe to our GossipChannel ActionCable backend and we implemented a method which can be called from Vue.js to send a message.

The second half of this code is a simple Vue.js model with two methods to add a message ( ) to the data model and send a message ( ) to ActionCable.

The frontend is a simple HTML form with Vue.js tags ( ) to get the data rendered and provide two inputs to change the name of the Gossiper and the functionality to send a message on the keydown event ( ).

Store Directory: If you would like to use Vuex in your Nuxt application this is the directory where you should put your store files in.ConfigurationIn addition to the project structure described above you’ll find two configuration files in the project folder which are both essential to for your application: nuxt.config.js…

Let’s say that we want to make available the following two routes in our application:To do so let’s create a new subfolder home inside the pages folder and add two new files:Next, let’s insert the following code in index.vue:template h1This is /home/h1/templatescriptexport default {}/scriptand the following code in about.vue:template h1This…

In this case the Nuxt framework is operating in server rendered mode automatically which means that all views (pages) of your application are pre-rendered on server-side and delivered as HTML files to the client.

For further on this topic take a look at https://nuxtjs.org/api/nuxt or try out the ExpressJS + Nuxt starter template which is available at Generated DeploymentAnother great option of Nuxt is that is can generate static HTML files for your application by using the following command: $ npm run generate The output can…