I suggest trying Vue.js to enhance some Drupal user elements.For example, we want to show the “Create new account” button only if “Email” and “Username” fields are not empty.Vue.js componentsEveryone knows that a typical developer doesn’t reinvent a wheel, but use ready-made solutions.

The Vue.js community can offer a lot of awesome components.

Let’s try to use one of them.I believe that user input data should be validated as on the back-end as on the front-end side.

So you have to add“vee-validate is a lightweight plugin for Vue.js that allows you to validate input fields, and display errors.”

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!

At the same time, she continued her teaching practice, giving a course of professional web development to the local professional education center in Coimbra.

This project’s name is EdEra and it has grown up from a small platform of online courses into a big player at the Ukrainian educational system scene.

In 2014, Olga, with her husband and daughter, moved from Portugal to Berlin, where she started working at Meetrics as a frontend engineer and, after a year, became the team lead of an amazing team of frontend software developers.

Rui studied with Olga at the university of Coimbra and worked with her at Feedzai.

Creating and Animating a Modal Component as a Child Route Using VueHere’s a link to the repo.Here’s a live demo.As I work on side projects, I sometimes stumble upon a pattern that I really like.

I’m using a separate route for rules, because eventually I’m going to let user’s create groups of rules called rulesets, and I would like to be able to separate that out as another route, eventually.Of note, the Game Rules route renders only one component for the page view (lines 24–26)…

This will make sense once you see the GameSingle component.Also of note, we’re leveraging router meta which will be used in the GameSingle component to determine if the modal should be shown.

Note that the modal component (shown below) will only be shown if showModal is true.

When a user clicks on a rule, the route changes causing the showModal value to be true, which in turn renders modal and its children.The Modal ComponentWe wrap the entire component in a transition and use custom functions to handle the enter and leave animation.

Tags: modal component, modal renders, root App component, live demo,

@Rmmmsy:Here’s how you can leverage child routes in Vue to render stuff like a modal component.https://t.co/7ctMjYI1n0… https://t.co/lsj86HksNl

Qwintry team recently started active migration to Vue.js as a frontend framework in all our legacy and new projects: – – In terms of project size Qwintry is used by around half a million of customers around the world, we run two warehouses (in US and in Germany) on our…

I think that React was a great step forward for JS world in terms of state-awareness, and it showed lots of people the real functional programming in a good, practical way.

Lots of developers (including me – but I am not there anymore) are thinking that this specific restriction on syntax will help you write more modular code because you have to put your chunks of code to smaller helper functions and use them inside your render() function like this guy…

Let me show you the quick-editor set of components I’ve built recently with Vue.js for our Drupal website (I beg your pardon for the design – it is a backend UI for our operators, and our designers are busy creating frontend interfaces for our customers so this piece is waiting…

Angular 1 was a great frontend framework that is located in the opposite corner (from React) of the imaginary JS map of purity and readability of codebases – it allows you to start quickly, it gives you some real fun for your first 1k lines of code, and then it…

Until that point, I had been relatively content with React — it is a good framework based on solid design principles centred around view templates, virtual DOM and reacting to state, and Vue also provides these great things.

For all that is good about JSX, there are some valid criticisms: by blurring the line between JavaScript and HTML, it makes it a bit too easy to start writing complex code in your template which should instead be separated out and written elsewhere in your JavaScript view code.Vue instead…

If the JavaScript, CSS and HTML for your component is taking up too many lines then it might be time to modularise further.When it comes to the style tag of a Vue component, we can add the ‘scoped’ attribute.

Easily extensibleAs mentioned, Vue uses standard HTML, JS and CSS to build its components as a default, but it is really easy to plug in other technologies.

Single file components support, babel, linting, testing and a sensible project structure can all be created with a single command in your terminal.There is one thing, however I miss from the CLI and that is the ‘vue build’.