Vue.js for backend developers

by Solomon Eseme

.

Updated Mon Apr 24 2023

Vue.js for backend developers

Following my recent article on Vue.js (Why learn Vue.js as a backend developer), I decided to compile a complete list and tutorial of things to learn in Vue.js for backend developers. As a backend developer, I have been trying to figure out the part and specific things to learn in Vue.js instead of trying to wrap my head around everything that Vue.js offers since am not a front-end major.

If you have been in this same shoe as I was, well this article is for you because I carefully select specific things that you need to learn in Vue.js as a backend developer.

WHAT IS VUE.JS

Let’s get started by defining and knowing what Vue.js means and how it’s different from other frameworks.

VUE.JS: Is a progressive JavaScript framework that focuses on building user interfaces.
  1. It works on the view layer only
  2. Incrementally adaptable.
  3. Easily integrated into other projects or libraries.
  4. Capable of powering advanced SPAs

LIST OF WHAT TO LEARN IN VUE.JS FOR BACKEND DEVELOPERS

  1. Reactive interfaces
  2. Declarative rendering
  3. Data binding
  4. Directives
  5. Template logic
  6. Component and nesting
  7. Event Handling
  8. Computed Properties
  9. SSR
  10. Handling Form
  11. Reusability & Composition
  12. Testing
  13. Deployment

REACTIVITY INTERFACES/SYSTEM: One good thing about VUEJS is the Reactivity System, if a datum is changed it triggers and update of the page to reflect the change. With this feature of VUEJS fully functional backend developers can easily create real-time and reactive dashboard among others things that can be done with VUEJS. Read more about it here.

DECLARATIVE RENDERING: This is the process of writing code with the intention of hiding the implementation details and focusing on the outcome. Under the rendering, you should look up things like Conditional Rendering and List Rendering which describe the use of conditional and iterative statements respectively.

DATA BINDING: Is the process that establishes a connection between the application UI and business logic. Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications.

Read more about it here

<div v-bind:class="{ active: isActive }"></div>

DIRECTIVES: Essentially, a directive is some special token in the markup that tells the library to do something to a DOM element. In Vue.js, the concept of the directive is drastically simpler than that in Angular. A Vue.js directive can only appear in the form of a prefixed HTML attribute. Directives are special attributes with the v- prefix.

Read more about it here

<p v-if="seen">Now you see me</p>

TEMPLATE LOGIC: VUEJS allows the inclusion of conditional and iterative statements right inside our components.

Read More about Components here

COMPONENTS: Are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js compiler would attach specified behavior to.

Read More about Components here

Uses of components

  1. They provide organization and encapsulations for large projects
  2. Re-usable code
  3. Can be separated into .Vue files
// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
   return {
     count: 0
   }
},
 template: '<button v-on:click="count++">You clicked me {{   count }} times.</button>'
})

EVENT HANDLING: v-on is the attribute added to the DOM elements to listen to the events in Vue.js. Learn how to emit different events and how to manipulate the template with event handlers.

Read More About It Here

<div id="example-1">
 <button v-on:click="counter += 1">Add 1</button>
 <p>The button above has been clicked {{ counter }} times.</p>
</div>

COMPUTED PROPERTIES: A computed property is essentially a property defined with getter/setter functions. You can use a computed property just like a normal property, but when you access it, you get the value returned by the getter function; when you change its value, you trigger the setter function passing in the new value as its argument.

In Vue, we use data to track changes to a particular property that we’d like to be reactive. Computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies.

Read more about it here

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
   return this.message.split('').reverse().join('')
  }
 }
})

SSR (Server-Side-Rendering): Is a popular technique for rendering a normal client-side single page app (SPA) on the server and then sending a fully rendered page to the client. By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally “hydrate” the static markup into a fully interactive app on the client.

Read More about it here.

I will post a practical approach to SSR soon on this publication. Follow now to receive alert when posted.

HANDLING FORM: Handling form requests and responses are very crucial to the overall web and application development, so it necessary to learn how to do it with best practices in Vue.js even as a backend developer.

Read More about it here

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

REUSABILITY AND COMPOSITION: You should learn things like mixins for a flexible way to distribute reusable functionalities for a Vue component. Also look at things like Render Functions and JSX, Plugins, and Filters.

Read More about it here

TESTING: Vue-CLI has built-in options for unit testing with Jest and Mocha that works out of the box. A slight look into unit testing with these tools could be worth it.

Read More about it here

DEPLOYMENT: As a backend developer, deployment may be one of your things if your company doesn’t have a separate operational team, so a deep dive into Vue.js deployment procedures will be a good save.

Read More about it here

There are more things to look into and a lot that Vue.js offers out of the box, but in my own opinion I feel these are most of the things that a backend developer should focus more on.

ADDITIONAL TOOLS AND PLUGINS

  1. VUE-ROUTER: Official router deeply integrated with VUEJS core.
  2. VUE-RESOURCES: Handle web requests.
  3. VUE-ASYNC-DATA: Async data loading.
  4. VUE-VALIDATOR: Form validation plugin
  5. VUE-DEVTOOLS: Chrome devTools extension

INSTALLING VUEJS

There are number of ways to implement VUEJS:

  1. Include the script tag in an HTML file
  2. Install using NPM
  3. Use the VUE-CLI tool along with webpack
  4. Install using the Bower Client-side package manager.

USING VUE-CLI TOOL

To install Vue.js using VUE-CLI TOOL is the easiest and my favorite way of installing Vue.js except when running with Laravel. Learn how to run the installation here.

VUEJS EXAMPLE

After installing Vue.js in our machine, we are ready to go, but before then lets to a look at Vue.js example.

Rendering data to the DOM and using Interpolation

<div id = "app">
  {{msg}}
</div>
var app = new Vue({
  el: "#app",
  data: {
  msg: "Hello world",
 }
});

I will be dropping articles and video tutorials on each of the topics listed above and also demonstrate how to connect the dots in creating a full-blown app with VUEJS.

Conclusions

There are lots you could learn with VUEJS, but as a backend developer, i decided to compile a quick list of topic that can may be very useful to learn quickly, this is based on my personal opinion and will be very glad to hear from you.

Thank you for reading my article.

Here at my blog or medium I regularly write about backend development, digital marketing and content management system. To read my future posts simply join my publication or click ‘Follow’ Also feel free to connect with me via Twitter, Facebook, Instagram.

If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my Youtube channel, we will be posting a collection of help full tutorials and guides like this one for artisans.

If you enjoy this post, make sure to let us know and share it with your friends and subscribe to my growing channel.

Sharing is caring.

Whenever you're ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform

Join 1000+ backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.

The MB Academy

The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.

Join Backend Weekly

If you like post like this, you will absolutely enjoy our exclusive weekly newsletter, Sharing exclusive backend engineering resources to help you become a great Backend Engineer.

Get Backend Jobs

Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board

Backend Tips, Every week

Backend Tips, Every week